JS實例之圖片輪播，實現圖片播放效果
阿新 • • 發佈：2017-06-22
utf length pla get eight code func nsh java
1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title>無標題文檔</title> 4 <style type="text/css"> 5 *{margin:0px auto;padding:0px;} 6 #wai{width:500px;height:200px;} 7 </style> 8 </head> 9 10 <body> 11 <div id="wai">12 <img src="file:///D|/我的文檔/圖片收藏/6cd51674jw1e1q9gwhvwjj.jpg" class="img" width="500" height="200"/> 13 <img src="file:///D|/我的文檔/圖片收藏/6cd51674jw1e3cddnbahhj.jpg" class="img" width="500" height="200" style="display:none";/> 14 </div> 15 </body> 16 <script type="text/javascript"> 17 varsuoyin=0; 18 var img=document.getElementsByClassName("img"); 19 huan(); 20 function huan(){ 21 xianshi(); 22 if(suoyin>=img.length-1){ 23 suoyin=0; 24 }else{ 25 suoyin++; 26 } 27 window.setTimeout("huan()",2000); 28 } 29 30 function xianshi(){ 31 for(var i=0;i<img.length;i++){ 32 img[i].style.display="none"; 33 } 34 img[suoyin].style.display="block"; 35 } 36 37 </script> 38 </html>
JS實例之圖片輪播，實現圖片播放效果