html图片淡进淡出切换,js实现图片淡入淡出切换简易效果

本文实例为大家分享了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)

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网