html5+轮播渐隐渐现,js渐隐渐现透明度变化淡入淡出轮播图

*{margin:0;padding:0;}a{text-decoration:none;color:#fff;}#box{height:454px;width:730px;margin:50px auto;position:relative;}ul{list-style:none;}#picture li img{vertical-align:bottom}#picture li{position:absolute;opacity:0}#picture .show{opacity:1}#list{width:100%;text-align:center;position:absolute;bottom:10px;}#list a{display:inline-block;height:18px;width:18px;background:aqua;border-radius:50%;margin:4px;font-size:12px;font-family:"微软雅黑";}#list .coloe{background:red}#btn{display:none;}#btn a{height:62px;width:28px;font-size:24px;text-align:center;line-height:62px;position:absolute;background:#ccc;margin-top:-31px;display:inline-block;top:50%;}#left{left:0}#right{right:0}img{width:730px;height:454px;}

window.οnlοad=function(){varaLi=picture.getElementsByTagName("li");varaA=list.getElementsByTagName("a");variCur=0;

timer=setInterval(function(){

iCur++;if(iCur>=aLi.length){

iCur=0}for(vari=0;i

startMove(aLi[i],{opacity:0})

aA[i].style.background="aqua"}

startMove(aLi[iCur],{opacity:100})

aA[iCur].style.background="red"},2000)

box.οnmοuseοver=function(){

clearInterval(timer);

btn.style.display="block"}

box.οnmοuseοut=function(){

timer=setInterval(function(){

iCur++;if(iCur>=aLi.length){

iCur=0}for(vari=0;i

startMove(aLi[i],{opacity:0})

aA[i].style.background="aqua"}

startMove(aLi[iCur],{opacity:100})

aA[iCur].style.background="red"},2000)

btn.style.display="none"}for(varj=0;j

aA[j].index=j

aA[j].οnclick=function(){

iCur=this.indexif(iCur>=aLi.length){

iCur=0}for(vari=0;i

startMove(aLi[i],{opacity:0})

aA[i].style.background="aqua"}

startMove(aLi[iCur],{opacity:100})

aA[iCur].style.background="red"}

}

left.οnclick=function(){

iCur--;if(iCur<0){

iCur=aLi.length-1}for(vari=0;i

startMove(aLi[i],{opacity:0})

aA[i].style.background="aqua"}

startMove(aLi[iCur],{opacity:100})

aA[iCur].style.background="red"}

right.οnclick=function(){

iCur++;if(iCur>=aLi.length){

iCur=0}for(vari=0;i

startMove(aLi[i],{opacity:0})

aA[i].style.background="aqua"}

startMove(aLi[iCur],{opacity:100})

aA[iCur].style.background="red"}

}