原生js淡入淡出
//轮播样式
#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;/*必须设置为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() {//移开后继续轮播
play();
};
}
varnextMove=function(){
index+=1;
if(index>=5){
index=0
}
moveImg(imgList,index);
moveIndex(list,index);
};
varplay=function(){
timer=setInterval(function(){
nextMove();
},2000);
};
play();
