<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){return document.getElementById(id);}
var n=0;
var Num=$("jfocusnum").getElementsByTagName("li");
var imglist=$("jfocuspic").getElementsByTagName("a");
function setBg(value){//數(shù)字區(qū)域切換，給當(dāng)前元素添加class類“on”，清除其他元素的類；
for(var i=0;i<Num.length;i++) Num[i].className=(value==i)?"on":"";
}
function plays(value){//圖片區(qū)域變換
try//try...catch 可以測試代碼中的錯(cuò)誤。try 部分包含需要運(yùn)行的代碼，而 catch 部分包含錯(cuò)誤發(fā)生時(shí)運(yùn)行的代碼。
{
with (jfocuspic)//針對(duì)于IE添加濾鏡效果；
{
filters[0].Apply();//在開始一個(gè)動(dòng)態(tài)效果之前，先需要進(jìn)行裝備（Apply），Apply事件用來使一種濾鏡效果生成。
for(i=0;i<Num.length;i++)i==value?children[i].style.display="block":children[i].style.display="none";
filters[0].play();//play()方法用于播放動(dòng)態(tài)效果。在這之前，已經(jīng)在#jfocus_pic樣式中為圖片層添加了濾鏡樣式；
}
}
catch(e)
{
for(i=0;i<Num.length;i++)
{
i==value?imglist[i].style.display="block":imglist[i].style.display="none";//使當(dāng)前圖片顯示，隱藏其他圖片；
}
}
}
function mouse(n){
for(var i=0;i<Num.length;i++){
(function(n){
Num[i].onmouseover=imglist[i].onmouseover=function(){clearInterval(autoStart);Mea(n);}//鼠標(biāo)經(jīng)過后停止自動(dòng)切換，并給函數(shù)Mea()傳遞一個(gè)當(dāng)前參數(shù)n
Num[i].onmouseout=imglist[i].onmouseout=function(){setAuto();}
})(i);
}
}
function Mea(value){
n=value;
mouse();
setBg(value);
plays(value);
}
function auto(){//參數(shù)n的遞增使圖片自動(dòng)輪換的關(guān)鍵；
n++;
if(n>Num.length-1)n=0;
Mea(n);
}
function setAuto(){autoStart=setInterval("auto()", 2000)}//每隔2000毫秒，便執(zhí)行一次auto()函數(shù)；每執(zhí)行一次，參數(shù)n便遞增1
setAuto();//調(diào)用函數(shù)