一、图片轮换手动和自动显示

 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>
posted on 2016-05-10 08:58 悠悠小花阅读(210) 评论(0) 收藏举报