本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持查字典教程网。
【js实现图片淡入淡出切换简易效果】相关文章：
★ jQuery插件Slider Revolution实现响应动画滑动图片切换效果