图片轮播！ 

 1 <head>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 3 <title>无标题文档</title>
 4 <style>
 5 *{
 6     margin:0px auto;
 7     padding:0px;}
 8 .tuijian
 9 {
10     width:1377x;
11     height:768px;
12     background-repeat:no-repeat;}
13 .page
14 {
15     bottom:200px;
16     background-color:#000;
17     background-position:center;
18     background-repeat:no-repeat;
19     width:94px;
20     height:165px;
21     opacity:0.5;}
22 #p1
23 {
24     background-image:url(QQ%E5%9B%BE%E7%89%8720160326142949.png);
25     float:left;
26     margin:-400px 0px 0px 10px;}
27 #p2
28 {
29     background-image:url(QQ%E5%9B%BE%E7%89%8720160326142934.png);
30     float:right;
31     margin:-400px 10px 0px 0px;}
32 </style>
33 </head>
34 
35 <body>
36 <div class="tuijian"  id="c" style="background-image:url(1384480949246.jpg)"></div>
37 <div class="page" id="p1" onclick="d(-1)"></div>
38 <div class="page" id="p2" onclick="d(1)"></div>
39 </body>
40 </html>
41 <script>
42 var jpg=new Array();
43 jpg[0]="url(1384480949246.jpg)";
44 jpg[1]="url(1403834403676.jpg)";
45 jpg[2]="url(1449111255870.jpg)";
46 var a=document.getElementById("c");
47 var x=0;var n=0;
48 function huan()
49 {
50     x++;
51     if(x==jpg.length)
52     {
53         x=0;}
54         a.style.backgroundImage=jpg[x];
55         if(n==0)
56         {
57             window.setTimeout("huan()",3000);}
58     }
59     function d(m)
60     {
61         n=1;
62         x=x+m;
63         if(x<0)
64         {
65             x=jpg.length-1;}
66             else if(x>=jpg.length)
67             {
68                 x=0;}
69                 a.style.backgroundImage=jpg[x];}
70                 window.setTimeout("huan()",3000);
71 </script>

 

posted @ 2016-03-29 08:24  一枚小兵  阅读(109)  评论(0)    收藏  举报