JS实例之图片轮播，实现图片播放效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS实例之图片轮播，实现图片播放效果相关的知识，希望对你有一定的参考价值。
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 var suoyin=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实例之图片轮播，实现图片播放效果的主要内容，如果未能解决你的问题，请参考以下文章