javascrip实现无缝滚动

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>无缝滚动</title>
 6     <style>
 7         .scroll-no-gap {
 8             width: 300px;
 9             height: 100px;
10             position: relative;
11             overflow: hidden;
12         }
13 
14         .scroll-no-gap .ul-scroll {
15             list-style: none;
16             margin: 0;
17             padding: 0;
18             height: 100px;
19             width: 100px;
20             position: absolute;
21             left: 0;
22             top: 0;
23         }
24 
25         .scroll-no-gap .ul-scroll li {
26             width: 100px;
27             height: 100px;
28             line-height: 100px;
29             text-align: center;
30             float: left;
31         }
32 
33         .scroll-no-gap .ul-scroll li:nth-child(even) {
34             background-color: rosybrown;
35         }
36 
37         .scroll-no-gap .ul-scroll li:nth-child(odd) {
38             background-color: aquamarine;
39         }
40     </style>
41 </head>
42 <body>
43 <!--无缝滚动-->
44 <div class="scroll-no-gap">
45     <ul class="ul-scroll">
46         <li>1</li>
47         <li>2</li>
48         <li>3</li>
49         <li>4</li>
50         <li>5</li>
51         <li>6</li>
52         <li>7</li>
53         <li>8</li>
54         <li>9</li>
55     </ul>
56 </div>
57 <button class="prev">prev</button>
58 <button class="next">next</button>
59 <script>
60     //无缝滚动
61     //取值：oDiv.offsetLeft(可读写)  ==>字符串
62     //设置值： oDiv.style.left（只读） ==> 数值
63     var oUl = document.getElementsByClassName('ul-scroll')[0];
64     var aLi = oUl.getElementsByTagName('li');
65     //console.log(aLi.length);
66     oUl.style.width = aLi.length * 100 + 'px';
67     //console.log(oUl.offsetWidth);
68     var oPrev = document.getElementsByClassName('prev')[0];
69     var oNext = document.getElementsByClassName('next')[0];
70     var now = 0;
71     oNext.onclick = function(){
72         now = now + 1;
73         oUl.style.left = oUl.offsetLeft - 300 + 'px';
74         if(now == 3){
75             oUl.style.left = 0;
76             now = 0;
77         }
78     };
79     oPrev.onclick = function(){
80         now = now - 1;
81         oUl.style.left = oUl.offsetLeft + 300 + 'px';
82         if(now == -1){
83             now = 2;
84             oUl.style.left = -(aLi.length/3 - 1)*300 + 'px';
85         }
86     };
87 
88 </script>
89 </body>
90 </html>

 

posted @ 2017-01-02 15:22  芒果酱-Jessie  阅读(140)  评论(0)    收藏  举报