In diesem Artikel wurde der detaillierte Code des JS -Bildes ausgetauscht, der für Ihre Referenz ein- und ausschaltet. Der spezifische Inhalt ist wie folgt
<! DocType html> <html> <pead> <meta charset = "utf-8"> <title> </title> <style type = "text/csS"> *{padding: 0; Rand: 0;} ul {Überlauf: Hidden;} li {list-style: 100px; Höhe: 30px: 30px: 30px: 30px: 1px: 1px solide 000; 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; für (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 Schritt = 2; ClearInterval (Zeit); ClearInterval (Time1); time = setInterval (function () {num+= schritt; if (num> = 200) {num = 200; clearInterval (Zeit);} oimg.style.opacity = num/200;}, 20)}} </script> </html>Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.