1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>无缝滚动</title> 6 <style> 7 .scroll-no-gap { 8 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 100px; 20 position: absolute; 21 left: 0; 22 top: 0; 23 } 24 25 .scroll-no-gap .ul-scroll li { 26 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>