本文實例為大家分享了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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。