javascript 封装的一个实用的焦点图切换效果

　　<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>

　　.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;}

　　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].onmouseover=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();

　　}