第一种：
运行起来，点击之后，就停止循环
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>
运行后的效果图：
时间： 2024-12-14 09:16:04