自己动手、丰衣足食！<箭头 → ← → ← ---2>

第二种：

运行之后 不管点击不点击 都循环

 

也就是把这个地方的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>点击之后 照样运行 不会因为点击之后就不循环了 

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