第二种：
运行之后 不管点击不点击 都循环
也就是把这个地方的n=1去掉
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 * 8 { 9 margin:0px auto; 10 padding:0px; 11 font-family:"Courier New", Courier, monospace; 12 } 13 #a 14 { 15 width:700px; 16 height:700px; 17 background-repeat:no-repeat; 18 } 19 .pages 20 { 21 top:500px; 22 background-color:#000; 23 background-position:center; 24 background-repeat:no-repeat; 25 opacity:0.4; 26 width:90px; 27 height:90px; 28 } 29 #b 30 { 31 float:left; 32 margin:400px 0px 0px 10px; 33 } 34 #c 35 { 36 float:right; 37 margin:400px 10px 0px 0px; 38 } 39 </style> 40 </head> 41 42 <body> 43 44 45 46 47 48 <div id="a" style="background-image:url(1.png);"> 49 <div class="pages" id="b" style="background-image:url(jiantou2.png)" onclick="dodo(-1)"></div> 50 <div class="pages" id="c" style="background-image:url(jiantou-1.png)" onclick="dodo(1)"></div> 51 52 </div> 53 54 55 56 57 </body> 58 </html> 59 <script language="javascript"> 60 var jpg =new Array(); 61 jpg[0]="url(1.png)"; 62 jpg[1]="url(2.png)"; 63 jpg[2]="url(3.png)"; 64 jpg[3]="url(4.png)"; 65 var aimg = document.getElementById("a");var xd=0;var n=0; 66 function huan() 67 { 68 xd++; 69 if(xd == jpg.length) 70 { 71 xd=0; 72 } 73 74 aimg.style.backgroundImage=jpg[xd]; 75 if(n==0) 76 { 77 var id = window.setTimeout("huan()",3000); 78 } 79 80 81 } 82 function dodo(m) 83 { 84 xd = xd+m; 85 if(xd < 0) 86 { 87 xd = jpg.length-1; 88 } 89 else if(xd >= jpg.length) 90 { 91 xd = 0; 92 } 93 aimg.style.backgroundImage=jpg[xd]; 94 } 95 window.setTimeout("huan()",3000); 96 </script>
运行之后的效果图
其实效果图都一样 就是<1>点击之后就停止了运行 点到那个图就停在那个图
<2>点击之后 照样运行 不会因为点击之后就不循环了