html5自动淡入淡出图片,js实现图片淡入淡出切换简易效果

*{padding: 0;margin: 0;}

ul{overflow: hidden;}

li{list-style: none;height: 30px;border: 1px solid #000;width: 100px;float: left;line-height: 30px;text-align: center;}

img{width:306px;opacity: 0;}

.active{background:yellow}

• 王宝强
• 马蓉
• 宋吉

var oLi=document.getElementsByTagName("li");

var oImg=document.getElementsByTagName("img")[0];

var arr=['img/wbb.jpg','img/wlp.jpg','img/qs.jpg']

var time=null;

var time1=null;

for(i=0;i

oLi[i].index=i;

oLi[i].οnclick=function(){

for(i=0;i

oLi[i].className="";

}

this.className="active";

oImg.src=arr[this.index];

var num=0;

var step=2;

clearInterval(time);

clearInterval(time1);

time = setInterval(function(){

num+=step;

if(num>=200){

num=200;

clearInterval(time);

}

oImg.style.opacity = num/200;

},20)

}

}