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>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 
41 <div id="tuijian" style=" background-image:url(1.jpg);">
42 <div class="pages" id="p1" onclick="dodo(-1)"></div>            
43 <div class="pages" id="p2" onclick="dodo(1)"></div>        
44 </div>
45 </body>
46 </html>
47 <script language="javascript">
48 var jpg =new Array();
49 jpg[0]="url(1.jpg)";
50 jpg[1]="url(2.jpg)";
51 jpg[2]="url(3.jpg)";
52 var tjimg = document.getElementById("tuijian");
53 var xb=0;
54 var n=0;
55 
56 function huan()
57 {    
58     xb++;    
59     if(xb == jpg.length)    
60     {        
61     xb=0;    
62     }        
63     tjimg.style.backgroundImage=jpg[xb];    
64     if(n==0)    
65     {    
66     var id = window.setTimeout("huan()",3000);    
67     }        
68 }
69 
70 function dodo(m)
71 {       
72     n=1;    
73     xb = xb+m;    
74     if(xb < 0)    
75     {        xb = jpg.length-1;    
76     }    
77     else if(xb >= jpg.length)    
78     {        xb = 0;    
79     }    
80     tjimg.style.backgroundImage=jpg[xb];
81 }
82 window.setTimeout("huan()",3000);
83 </script>
posted on 2016-02-29 09:15 悠悠小花阅读(210) 评论(0) 收藏举报