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

本文实例为大家分享了js图片淡入淡出切换详细代码，供大家参考，具体内容如下

<！DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{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}</style></head><body><ul><li>王宝强</li><li>马蓉</li><li>宋吉</li></ul><img src=""/></body><script src="public.js"></script><script type="text/javascript">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.length;i++）{oLi[i].index=i;oLi[i].onclick=function（）{for（i=0;i<oLi.length;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） }} </script></html>

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