javascrip实现无缝滚动

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>无缝滚动</title>
     <style>
         .scroll-no-gap {
             width: 300px;
             height: 100px;
             position: relative;
             overflow: hidden;
         }

         .scroll-no-gap .ul-scroll {
             list-style: none;
             margin: 0;
             padding: 0;
             height: 100px;
             width: 100px;
             position: absolute;
             left: 0;
             top: 0;
         }

         .scroll-no-gap .ul-scroll li {
             width: 100px;
             height: 100px;
             line-height: 100px;
             text-align: center;
             float: left;
         }

         .scroll-no-gap .ul-scroll li:nth-child(even) {
             background-color: rosybrown;
         }

         .scroll-no-gap .ul-scroll li:nth-child(odd) {
             background-color: aquamarine;
         }
     </style>
 </head>
 <body>
 <!--无缝滚动-->
 <div class="scroll-no-gap">
     <ul class="ul-scroll">
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
         <li>5</li>
         <li>6</li>
         <li>7</li>
         <li>8</li>
         <li>9</li>
     </ul>
 </div>
 <button class="prev">prev</button>
 <button class="next">next</button>
 <script>
     //无缝滚动
     //取值：oDiv.offsetLeft(可读写)  ==>字符串
     //设置值： oDiv.style.left（只读） ==> 数值
     var oUl = document.getElementsByClassName('ul-scroll')[0];
     var aLi = oUl.getElementsByTagName('li');
     //console.log(aLi.length);
     oUl.style.width = aLi.length * 100 + 'px';
     //console.log(oUl.offsetWidth);
     var oPrev = document.getElementsByClassName('prev')[0];
     var oNext = document.getElementsByClassName('next')[0];
     var now = 0;
     oNext.onclick = function(){
         now = now + 1;
         oUl.style.left = oUl.offsetLeft - 300 + 'px';
         if(now == 3){
             oUl.style.left = 0;
             now = 0;
         }
     };
     oPrev.onclick = function(){
         now = now - 1;
         oUl.style.left = oUl.offsetLeft + 300 + 'px';
         if(now == -1){
             now = 2;
             oUl.style.left = -(aLi.length/3 - 1)*300 + 'px';
         }
     };

 </script>
 </body>
 </html>