原生JS无缝滚动
原生JS无缝滚动原理：通过定时器（setInterval）设置scrollLeft值，判断当前滚动的值大于内容的宽度，重新设置滚动元素的scrollLeft为0；
核心代码如下：
var timer = window.setInterval(function(){
box.scrollLeft++;
var curLeft = box.scrollLeft;
if(curLeft >= beginw){
box.scrollLeft = 0;
}
},1);
具体内容效果请看下面的代码。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝滚动</title> <link rel="stylesheet" href="../../tab/mobileReset.css" /> <style type="text/css"> #box{width: 500px;height: 50px;background: blue;margin:100px auto;line-height: 50px;padding:0 15px;overflow: hidden} #box span{color: red;font-size: 14px;} #box p{color: yellow;font-size: 14px;white-space: nowrap;display: inline-block;} .boxCon{width: 10000px;} </style> </head> <body> <div id="box"> <div class="boxCon"> <p id="begin"><span>通知:</span>offset():等同于jQuery中的offset方法，实现获取页面中任意一个元素距离body的偏移（包含左偏移和上偏移），不管当前元素的父级参照物是谁。</p> <p><span>通知:</span>offset():等同于jQuery中的offset方法，实现获取页面中任意一个元素距离body的偏移（包含左偏移和上偏移），不管当前元素的父级参照物是谁。</p> </div> </div> <script> var box = document.getElementById("box"); var begin = document.getElementById("begin"); var beginw = getCss(begin,"width");
//无缝轮播代码其实很简单 哈哈 var timer = window.setInterval(function(){ box.scrollLeft++; var curLeft = box.scrollLeft; if(curLeft >= beginw){ box.scrollLeft = 0; } },1);
//获取元素具体样式方法 function getCss(curEle,attr){ var val = null,reg = null; if("getComputedStyle" in window){ val = window.getComputedStyle(curEle,null)[attr]; }else{ if(attr === "opacity"){ val = curEle.currentStyle["filter"]; reg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/i; val = reg.test(val)?reg.exec(val)[1]/100:1; }else{ val = curEle.currentStyle[attr]; } } reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i; return reg.test(val)?parseFloat(val):val; } </script> </body> </html>
希望以上代码对您有帮助，不明白的可以留言，互相学习。哈哈
