JS -- 图片无缝轮滚 

 1 <!DOCTYPE html>
 2 <html lang="cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         #box{
 8             width: 800px;
 9             height: 200px;
10             border: 1px solid #000;
11             margin: 0 auto;
12             overflow: hidden;
13         }
14         #content{
15             width: 10000px;
16         }
17         #imglist{float: left;}
18         #imglist img{
19             width: 300px;
20             height: 200px;
21             float: left;
22         }
23     </style>
24 </head>
25 <body>
26     <h1>图片无缝轮滚</h1>
27     <hr>
28 
29     <div id="box">
30         <div id="content">
31             <div id="imglist">
32                 <img src="./imgs/Meinv001.jpg">
33                 <img src="./imgs/Meinv002.jpg">
34                 <img src="./imgs/Meinv003.jpg">
35                 <img src="./imgs/Meinv004.jpg">
36                 <img src="./imgs/Meinv005.jpg">
37                 <img src="./imgs/Meinv006.jpg">
38                 <img src="./imgs/Meinv007.jpg">
39                 <img src="./imgs/Meinv008.jpg">
40                 <img src="./imgs/Meinv009.jpg">
41                 <img src="./imgs/Meinv010.jpg">
42                 <img src="./imgs/Meinv011.jpg">
43                 <img src="./imgs/Meinv012.jpg">
44                 <img src="./imgs/Meinv013.jpg">
45                 <img src="./imgs/Meinv014.jpg">
46                 <img src="./imgs/Meinv015.jpg">
47             </div>
48         </div>
49     </div>
50 
51     <script>
52 
53         // 获取一轮图片的宽度
54         var width =  imglist.offsetWidth;
55         // 将一轮图片克隆一份追加到当前图片之后.
56         content.appendChild(imglist.cloneNode(true));
57 
58         function scrollImage () {
59             // 判断 一轮图片是否滚完
60             if (box.scrollLeft >= width) {
61                 box.scrollLeft = 0;
62             }
63             // 每次滚动5像素
64             box.scrollLeft += 5;
65             console.log(box.scrollLeft);
66         }
67 
68         // 0.1秒
69         setInterval(scrollImage, 100);
70 
71     </script>
72 </body>
73 </html>
　　这是一个用JS 做的一个图片无缝轮滚 ， 里面的注释有自己的思路，有不足之处望见谅。

 

posted @ 2018-09-05 19:55  GodH  阅读(215)  评论(0)  编辑  收藏  举报