1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>无标题文档</title>
6 <style>
7 * {
8 margin: 0;
9 padding: 0;
10 list-style: none;
11 }
12 html,body{
13 overflow: hidden;
14 }
15 #wrap {
16 width: 700px;
17 height: 350px;
18 border: #000 1px solid;
19 margin: 50px auto;
20 position: relative;
21 overflow:hidden;
22 }
23
24 #wrap ul {
25 height: 350px;
26 position:absolute;
27 left:0;
28 top: 0;
29 }
30 #wrap ul li{
31 width: 700px;
32 height: 350px;
33 float: left;
34 }
35 #wrap ul li img {
36 width: 700px;
37 height: 350px;
38 }
39 #wrap ol {
40 width: 425px;
41 height:30px;
42 position:absolute;
43 left: 50%;
44 bottom: 10px;
45 margin-left: -212px;
46 }
47 #wrap ol li {
48 width:80px;
49 height: 30px;
50 float:left;
51 margin-right: 5px;
52 background:#000;
53 position: relative;
54 }
55
56 #wrap ol li span{
57 width: 0;
58 height: 30px;
59 position:absolute;
60 left: 0;
61 top: 0;
62 background: #c00;
63 }
64 #wrap .next a{
65 width: 60px;
66 height: 40px;
67 border: 1px solid #000;
68 font-size: 30px;
69 text-align: center;
70 line-height: 40px;
71 color: #fff;
72 position: absolute;
73 right:0;
74 top:50%;
75 margin-top:-20px;
76 }
77 #wrap .prev a{
78 width: 60px;
79 height: 40px;
80 border: 1px solid #000;
81 font-size: 30px;
82 text-align: center;
83 line-height: 40px;
84 color: #fff;
85 position: absolute;
86 left:0;
87 top:50%;
88 margin-top:-20px;
89 }
90 </style>
91 <script src="move.js"></script>
92 <script>
93
94 window.onload = function(){
95 var oWrap = document.getElementById('wrap');
96 var oUl = oWrap.children[0];
97 var aLi = oUl.children;
98 var oOl = oWrap.children[1];
99 oUl.style.left='-700px';
100 var aSpan = oOl.getElementsByTagName('span');
101 oUl.style.width = aLi.length * aLi[0].offsetWidth + 'px';
102 var iNow = 1;
103 var timer=null;
104 show();
105 function show(){
106 clearInterval(timer);
107 timer=setInterval(function(){
108 iNow++;
109 if(iNow==aLi.length){
110 iNow=2;
111 oUl.style.left='-700px';
112 }
113 move(oUl,{
114 left:-700*iNow
115 });
116
117 },1200);
118 }
119 }
120 </script>
121 </head>
122
123 <body>
124 <div id="wrap">
125 <ul>
126 <li><img src="img/img/4.jpg"></li>
127 <li><img src="img/img/0.jpg"></li>
128 <li><img src="img/img/1.jpg"></li>
129 <li><img src="img/img/2.jpg"></li>
130 <li><img src="img/img/3.jpg"></li>
131 <li><img src="img/img/4.jpg"></li>
132 <li><img src="img/img/0.jpg"></li>
133 </ul>
134 <div class="next" id="next"><a href="javascript:;">next</a></div>
135 <div class="prev" id="prev"><a href="javascript:;">prev</a></div>
136 </div>
137 </body>
138 </html>
浙公网安备 33010602011771号