This article has shared the detailed code of the JS picture fading in and out switching for your reference. The specific content is as follows
<!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>Wang Baoqiang</li> <li>Ma Rong</li> <li>Song Ji</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>The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.