js学习进程（一）

定时器图片轮播

最近在模仿淘宝页面，其中有轮播效果，通过学习制作了图片轮播并且加入定时器，分享代码，以备以后不时之需

css:

.pic-banner{
width: 520px;
    height: 280px;
    padding-top: 30px;
    position: relative;
}
.pic-banner #pic{
width: 520px;
    height: 280px;
    padding-top: 30px;
    position: relative;
}
#pic img{
position: absolute;
top: 0px;
left: 0px;
display: none;
}
#tab{
width: 105px;
height: 10px;
position: absolute;
bottom: 10px;
left: 40%;
margin-left:5px;


}
#tab ul li{
width: 10px;
height: 10px;
list-style-type: none;
cursor: pointer;
background:#bbb;
border-radius: 100%;
float: left;
margin: 0 5px;
}
#tab ul li.on{
background:#f60;
}
#pic-btn div{
width: 25px;
height: 40px;
position: absolute;
color:#fff;
background: #999;
background:rgba(0,0,0,.5);
font-size: 20px;
font-weight: bold;
font-family: "Microsoft yahei";
line-height: 40px;
text-align: center;
top: 50%;
cursor: pointer;
filter: alpha(opacity:65);
opacity: 0.65;
}
#pic-btn #pbtn-left{left:0}

html:

<div class="pic-banner" id="pic-banner">
<div id="pic">
<img src="image/1.jpg">
<img src="image/2.jpg">
<img src="image/3.jpg">
<img src="image/4.jpg">
<img src="image/5.jpg">
</div>
<div id="tab">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="pic-btn">
<div id="pbtn-left">&lt;</div>
<div id="pbtn-right" style="right:0px">&gt;</div>
</div>

</div>

js:

var picImg=document.getElementById("pic").getElementsByTagName("img");
var picLis=document.getElementById("tab").getElementsByTagName("li");
var btnDivs=document.getElementById("pic-btn").getElementsByTagName("div");
var index=0;
var timer=null;
var picBanner=document.getElementById("pic-banner");
picImg[0].style.display="block";
picLis[0].className="on";


for(var i=0;i<picLis.length;i++){
picLis[i].index=i;
picLis[i].onclick=function(){
picImg[index].style.display="none";
picLis[index].className="";
index=this.index;
picImg[index].style.display="block";
picLis[index].className="on";
}
}
for(var i=0;i<btnDivs.length;i++){
btnDivs[i].index=i;
btnDivs[i].onselectstart=function(){
return false;
}
btnDivs[i].onclick=function(){
picImg[index].style.display="none";
picLis[index].className="";
if(this.index){
index ++;
index %= picLis.length;
}else{
index --;
if(index<0){
index=picLis.length-1;
}
}
picImg[index].style.display="block";
picLis[index].className="on";
};

}
auto();
picBanner.onmouseenter=function(){
clearInterval(timer);
};
picBanner.onmouseleave=function(){
auto();
}
function auto(){
timer=setInterval(function(){
picImg[index].style.display="none";
picLis[index].className="";
index ++;
index %= picLis.length;
picImg[index].style.display="block";
picLis[index].className="on";
},5000);
}