两张图片的轮播
Posted 龚轩明
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了两张图片的轮播相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script> 7 var myinterval=""; 8 function changeimg(obj){ 9 if(obj.value=="开始"){ 10 obj.value="停止"; 11 myinterval=window.setInterval("startit()",20); 12 }else{ 13 obj.value="开始"; 14 window.clearInterval(myinterval); 15 } 16 } 17 function startit(){ 18 var picarray=new Array("pic/01.jpg","pic/02.jpg","pic/03.jpg","pic/04.jpg", 19 "pic/05.jpg","pic/06.jpg","pic/07.jpg"); 20 21 var index=Math.round(Math.random()*picarray.length-1);//因为长度要比索引大要减1 22 var index2=Math.round(Math.random()*picarray.length-1); 23 index=index==-1?0:index; 24 document.getElementById("pc01").src=picarray[index]; 25 index2=index2==-1?0:index2; 26 document.getElementById("pc02").src=picarray[index2]; 27 } 28 </script> 29 </head> 30 <body> 31 32 <div id="div1"> 33 <img src="pic/01.jpg" id="pc01"> 34 </div> 35 <input type="button" value="开始" onclick="changeimg(this);"> 36 <div id="div2"> 37 <img src="pic/03.jpg" id="pc02"> 38 </div> 39 </body> 40 </html>
以上是关于两张图片的轮播的主要内容，如果未能解决你的问题，请参考以下文章