1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7 #wrap{
8 width: 300px;
9 height: 300px;
10 margin: 20px auto 0;
11 overflow: hidden;
12 position: relative;
13 /*border: 10px solid gray;*/
14 }
15 #sroll{
16 height: 300px;
17 width: 9999px;
18 position: absolute;
19 }
20 #sroll img{
21 float: left;
22 width: 300px;
23 height: 300px;
24 }
25 </style>
26 </head>
27 <body>
28 <div id="wrap">
29 <div id="sroll">
30 <img src="img/1.jpg" alt="" />
31 <img src="img/2.jpg" alt="" />
32 <img src="img/3.jpg" alt="" />
33 <img src="img/4.jpg" alt="" />
34 </div>
35 </div>
36 </body>
37
38 <script type="text/javascript">
39 // 获取 wrap
40 var wrapDiv = document.getElementById("wrap");
41 // 获取 sroll
42 var srollDiv = document.getElementById("sroll");
43 // 获取所有 img 标签
44 var imgArray = srollDiv.getElementsByTagName("img");
45 var inset = 0;
46 // 求取 wrapDiv 的可视宽度
47 var width = wrapDiv.offsetWidth;
48
49 srollDiv.innerHTML += srollDiv.innerHTML;
50
51 console.log(srollDiv.innerHTML);
52 setInterval(function(){
53 inset -= 5;
54 if(inset <= -width * (imgArray.length / 2)){
55 inset = 0;
56 }
57 srollDiv.style.left = inset + "px";
58 },30);
59
60
61 </script>
62
63 </html>
