注:圖片地址寫在HTML之中的寫法~~
<div class="wrap" id='wrap'>
<ul id="pic">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ol id="list">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
window.onload=function(){
var wrap=document.getElementById('wrap'),
pic=document.getElementById('pic'),
img=pic.getElementsByTagName("li"),
list=document.getElementById('list').getElementsByTagName('li'),
index=0,
timer=null;
//初始化
fn();
function fn(){
for(var i=0;i<img.length;i++){
img[i].style.display="none";
list[i].className="";
}
img[index].style.display="block";
list[index].className="on";
}
//焦點切換
for(var i=0;i<img.length;i++){
list[i].id=i;
list[i].onmouseover=function(){
clearInterval(timer);
index=this.id;
fn();
}
}
wrap.onmouseover=function(){clearInterval(timer)};
wrap.onmouseout=autoPlay;
//自動切換 判斷一下避免多次重復(fù)疊加執(zhí)行定時器
if(timer){clearInterval(timer);timer=null;}
timer=setInterval(autoPlay,1000);
//單寫出來 減少語句
function autoPlay(){
index++;
if(index>=img.length){index=0}
fn();
}
}
*{margin:0; padding:0; list-style:none;}
.wrap{height:170px;width:490px;margin:60px auto;overflow: hidden;position: relative;margin:100px auto;}
.wrap ul{position:absolute;}
.wrap ul li{height:170px;display:none;}
.wrap ol{position:absolute; right:5px; bottom:10px;}
.wrap ol li{height:20px; width: 20px; background:#ccc; border:solid 1px #666; margin-left:5px; color:#000; float:left; line-height:center; text-align:center;cursor:pointer;}
.wrap ol .on{background:#E97305; color:#fff;}
最后編輯于 :
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者