この記事では、参照用のJS画像が退色し、切り替えをフェードすることの詳細なコードを共有しています。特定のコンテンツは次のとおりです
<！Doctype html> <html> <head> <meta charset = "utf-8"> <title> </title> <style type = "text/css"> *{padding：0; margin：0;} ul {hidden;} li {list-style：none：none：1ppx; wid 000; wid 000; wid 000; wid 000;左; line-height：30px; text-align：center;} img {width：306px; ofacity：0;} .active {background：yellow} </style> </head> <body> <ul> <li> wang baoqiang </li> <li> body </li> </ <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（時間）; ClearInterval（time1）; time = setInterval（function（）{num+= step; if（num> = 200）{num = 200; clearinterval（time）;} oimg.style.opacity = num/200;}、20）}} </script> </html> </html> </html>上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。