效果图如下:
HTML代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>无缝滚动</title><style type="text/css">body,ul{margin:0;padding:0;}.list_con{width:1000px;height:200px;border:1px solid #000;margin:10px auto 0;background-color:#f0f0f0;position:relative;overflow:hidden;}.list_con ul{list-style:none;width:2000px;height:200px;position:absolute;left:0;top:0;}.list_con li{width:180px;height:180px;float:left;margin:10px;}.btns_con{width:1000px;height:30px;margin:50px auto 0;position:relative;}.left,.right{width:30px;height:30px;background-color:gold;position:absolute;left:-40px;top:124px;font-size:30px;line-height:30px;color:#000;font-family: ‘Arial‘;text-align:center;cursor:pointer;border-radius:15px;opacity:0.5;}.right{left:1010px;top:124px;}</style><script src="js/move.js"></script></head><body><div class="btns_con"><div class="left" id="btn01"><</div><div class="right" id="btn02">></div></div><div class="list_con" id="slide"><ul id="list"><li><a href=""><img src="images/goods001.jpg" alt="商品图片"></a></li><li><a href=""><img src="images/goods002.jpg" alt="商品图片"></a></li><li><a href=""><img src="images/goods003.jpg" alt="商品图片"></a></li><li><a href=""><img src="images/goods004.jpg" alt="商品图片"></a></li><li><a href=""><img src="images/goods005.jpg" alt="商品图片"></a></li></ul></div></body></html>JS代码如下：
window.onload = function(){ ???// alert(1) ???// 1、自动播放-- 左侧 多次循环 left减小 ???var oList = this.document.getElementById(‘list‘) ???var oBtn01 = document.getElementById(‘btn01‘) ???var oBtn02 = document.getElementById(‘btn02‘) ???var oSlide = document.getElementById(‘slide‘) ???var num = 0 ?// left取值 ???var speed = -5 ???var oTimer = null ???// 程序复制两份产品 ???oList.innerHTML += oList.innerHTML ???// oList.innerHTML = oList.innerHTML + oList.innerHTML ???oTimer = setInterval(fnMove, 50) ???function fnMove(){ ???????num += speed ???????// 如果left小于-1000，回到left为0继续左侧移动 ???????if(num < -1000) ???????{ ???????????num = 0 ???????} ???????if(num>0) ???????{ ???????????num = -1000 ???????} ???????oList.style.left = num +‘px‘ ???} ???// 2、左右箭头单击，右 -- 右侧移动 ?左 -- 左侧移动 ???oBtn02.onclick = function(){ ???????speed = 5 ???} ???oBtn01.onclick = function(){ ???????speed = -5 ???} ???// 3、鼠标滑过停止播放 ?- 鼠标离开继续播放 ???oSlide.onmouseover = function(){ ???????// 停止定时器 ???????clearInterval(oTimer) ???} ???oSlide.onmouseout = function(){ ???????// 开启定时器 ???????oTimer = setInterval(fnMove, 50) ???}}
js动画之无缝滚动
原文地址：https://www.cnblogs.com/wf-skylark/p/9157262.html