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>JavaScript</title>
6 <style type="text/css">
7 *{
8 margin:0px auto;
9 padding:0px;
10 font-family:"微软雅黑";}
11
12 #tuijian{
13 width:760px;
14 height:350px;
15 background-repeat:no-repeat;
16 background-size:cover;}
17
18 .pages{
19 top:200px;
20 background-color:#000;
21 background-position:center;
22 background-repeat:no-repeat;
23 opacity: 0.4;
24 width: 30px;
25 height:60px; }
26
27 #p1{
28 background-image:url(11.jpg);
29 float:left;
30 margin:150px 0px 0px 10px; }//左右控制器样式
31
32 #p2{
33 background-image: url(22.jpg);
34 float:right;
35 margin:150px 10px 0px 0px;}
36 </style>
37 </head>
38
39 <body>
40 <div id="tuijian" style=" background-image:url(1.jpg);">
41 <div class="pages" id="p1" onclick="dodo(-1)"></div>
42 <div class="pages" id="p2" onclick="dodo(1)"></div>
43 </div>
44 </body>
45 </html>
46 <script language="javascript">
47 var jpg =new Array();
48 jpg[0]="url(1.jpg)";
49 jpg[1]="url(2.jpg)";
50 jpg[2]="url(3.jpg)";
51 var tjimg = document.getElementById("tuijian");
52 var xb=0;
53 var n=0;
54
55 function huan()
56 {
57 xb++;
58 if(xb == jpg.length)
59 {
60 xb=0;
61 }
62 tjimg.style.backgroundImage=jpg[xb];
63 if(n==0)
64 {
65 var id = window.setTimeout("huan()",3000);
66 }
67 }
68
69 function dodo(m)
70 {
71 n=1;
72 xb = xb+m;
73 if(xb < 0)
74 { xb = jpg.length-1;
75 }
76 else if(xb >= jpg.length)
77 { xb = 0;
78 }
79 tjimg.style.backgroundImage=jpg[xb];
80 }
81 window.setTimeout("huan()",3000);
82 </script>
