第一种：
运行起来，点击之后，就停止循环
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 n=1; 85 xd = xd+m; 86 if(xd < 0) 87 { 88 xd = jpg.length-1; 89 } 90 else if(xd >= jpg.length) 91 { 92 xd = 0; 93 } 94 aimg.style.backgroundImage=jpg[xd]; 95 } 96 window.setTimeout("huan()",3000); 97 </script>
运行后的效果图：
