纯js无缝滚动

<!--父容器要使用overflow: hidden;--><div id="imgsList" style="height:150px;width:980px;overflow: hidden;"> ?????<!--滚动容器--> ???<div id="marquee_self"> ???????<ul id="marquee_ul"> ???????????<li><img src="" width="180px" height="100px"></li> ???????????<li><img src="" width="180px" height="100px"></li> ???????????<li><img src="" width="180px" height="100px"></li> ???????</ul> ???</div></div>

#marquee_self *{ ???margin: 0; ???padding: 0;}#marquee_self{ ???width: 1620px; ??//所有图片长度个数*width ???height: 100px; ??//图片高度 ???//margin: 100px auto; ?居中 ???background-color: #646464; ???position: relative; ???overflow: hidden;}#marquee_self ul{ ???position:absolute; ???left:0; ???top:0; ???overflow: hidden; ?//li中超出部分隐藏掉 ???background-color: #3b7796; ?//背景色用来看问题}#marquee_self ul li{ ???float: left; ???//左对齐变为图片水平 ???width: 180px; ??//图片宽度 ???height: 100px; ?//图片高度 ???list-style: none; ?//无间隙}

<script type="text/javascript"> ???window.onload = function(){ ???????var oDiv = document.getElementById(‘marquee_self‘); ??//容器节点 ???????var oUl = document.getElementById(‘marquee_ul‘); ???//ul节点 ???????var speed = -2; ??//初始化速度,默认往左 ???????oUl.innerHTML += oUl.innerHTML;//ul中图片内容翻倍 ???????var oLi= oUl.getElementsByTagName(‘li‘); ?//获取ul节点下所有li集合 ???????oUl.style.width = oLi.length*180+‘px‘;//设置ul的宽度翻倍后的宽度,使图片可以放下 ???????/*var oBtn1 = document.getElementById(‘btn_left‘); ?左移动按钮 ???????var oBtn2 = document.getElementById(‘btn_right‘); ?右移动按钮*/ ???????function move(){ ???????????if(oUl.offsetLeft<-(oUl.offsetWidth/2)){ ???//向左滚动，当向左滚动超过总ul长度一半时 ???????????????oUl.style.left = 0; ??//变为从头开始 ???????????} ???????????if(oUl.offsetLeft > 0){ ???????//向右滚动，当靠右的图1移出边框时 ???????????????oUl.style.left = -(oUl.offsetWidth/2)+‘px‘; ???????????} ???????????oUl.style.left = oUl.offsetLeft + speed + ‘px‘; ??//图片移动 ???????} ???????/*oBtn1.addEventListener(‘click‘,function(){ ??//向左移动按钮点击事件 ???????????speed = -2; ???????},false); ???????oBtn2.addEventListener(‘click‘,function(){ ???//向右移动按钮点击事件 ???????????speed = 2; ???????},false);*/ ???????var timer = setInterval(move,30);//全局变量 ，保存返回的定时器 ???????oDiv.addEventListener(‘mouseout‘, function () { ?//鼠标移开添加计时器 ???????????timer = setInterval(move,30); ???????},false); ???????oDiv.addEventListener(‘mousemove‘, function () { ?//鼠标移入清除定时器 ??????????clearInterval(timer); ???????},false); ???}</script>