原生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();