//輪播樣式
#index{
position:absolute;
right:40px;
bottom:20px;
}
#index li{
width:8px;
height:8px;
border:solid1pxgray;
border-radius:100%;
background-color:#eee;
display:inline-block;
}
#img{
width:720px;
height:405px;
}
#img li{
width:720px;
height:405px;
position:absolute;/*必須設(shè)置為absolute零如，否則第一個li會把后面的都覆蓋*/
z-index: -1;
opacity:0;
transition:opacity1s ease-in;
}
#index.on{
background-color:black;
}
#img.opa-on{
opacity:1;
}
js代碼
varimgList=document.getElementById('img').getElementsByTagName('li');
varlist=document.getElementById('index').getElementsByTagName('li');
varindex=0;
vartimer;
functionmoveImg(list,index) {
for(vari=0;i
if(list[i].className=='opa-on'){//清除li的透明度樣式
list[i].className='';
}
}
list[index].className='opa-on';
}
functionmoveIndex(list,num){//移動小圓圈
for(vari=0;i
if(list[i].className=='on'){//清除li的背景樣式
list[i].className='';
}
}
list[num].className='on';
}
for(vari=0;i
list[i].index=i;
list[i].onmouseover=function() {
varclickIndex=parseInt(this.index);
index=clickIndex;
moveImg(imgList,index);
moveIndex(list,index);
clearInterval(timer);
};
list[i].onmouseout=function() {//移開后繼續(xù)輪播
play();
};
}
varnextMove=function(){
index+=1;
if(index>=5){
index=0
}
moveImg(imgList,index);
moveIndex(list,index);
};
varplay=function(){
timer=setInterval(function(){
nextMove();
},2000);
};
play();
