js实现图片淡入淡出切换简易效果
本文实例为大家分享了js图片淡入淡出切换详细代码,供大家参考,具体内容如下
<!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title></title> <styletype="text/css"> *{padding:0;margin:0;} ul{overflow:hidden;} li{list-style:none;height:30px;border:1pxsolid#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> <imgsrc=""/> </body> <scriptsrc="public.js"></script> <scripttype="text/javascript"> varoLi=document.getElementsByTagName("li"); varoImg=document.getElementsByTagName("img")[0]; vararr=['img/wbb.jpg','img/wlp.jpg','img/qs.jpg'] vartime=null; vartime1=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]; varnum=0; varstep=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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。