JQ左右无缝滚动 js左右无缝滚动

JQ左右无缝滚动效果，JS左右无缝滚动

jq无缝滚动效果

具体实现代码

<div id="slider">
	<ul>
		<li>demo</li>
		<li>demo</li>
		<li>demo</li>
		<li>demo</li>
	</ul>
</div>
<script>
	var box = document.getElementById("slider");
	var ul = box.getElementsByTagName("ul")[0];//获取ul
    var lis = ul.getElementsByTagName("li");//获取所有的li元素
    var speed = 2;//速度
    ul.innerHTML += ul.innerHTML;//相当于克隆
    ul.style.width = lis.length*lis[0].offsetWidth+'px';//计算赋值ul的宽度
    //滚动方法
   function move (){
     
     
       // 如果当前left值 <= 负ul/2的宽度 给left值重新定位成0
       if(ul.offsetLeft<=-ul.offsetWidth/2){
     
     
            ul.style.left = "0";
         }
       //像左边滚动
        ul.style.left = ul.offsetLeft - speed + 'px';
    }
    //定时器
     var timer = setInterval(move,30);
     //鼠标经过控制暂停滚动
     box.onmouseover = function () {
     
     
     	 clearInterval(timer);
     }
    box.onmouseout = function () {
     
     
     timer = setInterval(move,30);
   }
</script>