自己动手、丰衣足食！<箭头 → ← → ← ---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     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>

运行后的效果图：

posted @ 2016-05-25 20:43  右掱写爱  阅读(212)  评论(1)  编辑  收藏  举报