css代码
<style>
.jfocus{width:300px;height:300px;border:#ccc 1px solid;background-color:#fff;}#jfocuspic{filter: progid:dximagetransform.microsoft.fade (duration=0.5,overlap=1.0 );width:300px;height:200px;overflow:hidden;}#jfocuspic a{display:none; font-size:2em; text-align:center; line-height:200px; font-weight:bold; background-color:#ccc; height:200px; cursor:pointer;}#jfocusnum li{cursor:pointer;height:50px; width:50px; line-height:50px;display:inline-block; color:#000; border:#999 1px solid; text-align:center; background-color:#ccc; float:left; margin:0 5px;}#jfocusnum li.on{color:#f00; font-weight:bold; border:#900 1px solid; font-size:14px;}
</style>
网页特效代码
<script>
function $(id,tag){var re=(id&&typeof id!="string")?id:document.getelementbyid(id);if(!tag){return re;}else{return re.getelementsbytagname(tag);}}//获取元素对象
function focusimg(focbox,picobj,numbox,numobj,time){
var n=0;
var imglist=$(focbox,picobj);
var num=$(numbox,numobj);
function setbg(value){for(var i=0;i<num.length;i++) num[i].classname=(value==i)?"on":"";}//设置字母列表的样式切换；
function plays(value){
if(document.all) $(focbox).filters[0].apply();//滤镜
for(i=0;i<num.length;i++){i==value?imglist[i].style.display="block":imglist[i].style.display="none";}
if(document.all) $(focbox).filters[0].play();
}
function mouse(n){//设置鼠标经过和离开后的事件；
for(var i=0;i<num.length;i++){
(function(n){
num[i].onmouseo教程ver=imglist[i].onmouseover=function(){clearinterval(autostart);mea(n);}
num[i].onmouseout=imglist[i].onmouseout=function(){setauto();}
})(i);
}
}
function mea(value){n=value;mouse(n);setbg(value);plays(value);}
function auto(){n++;if(n>num.length-1)n=0; mea(n);}
function setauto(){autostart=setinterval(function(){auto();},time)}
setauto();
}
</script>
html代码
<div class="jfocus">
<div id="jfocuspic">
<a href="#" style="display:block;">图片一</a>
<a href="#">图片二</a>
<a href="#">图片三</a>
<a href="#">图片四</a>
</div>
<ul id="jfocusnum">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>