<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style> ???body,ul{margin:0;padding:0;} ???div{position:relative;width:680px;height:170px;border:1px solid black;margin:10px auto;overflow:hidden;} ???ul{position:absolute;left:0;top:0;} ???li{width:150px;height:150px;padding:10px;float:left;list-style:none;} ???img{width:150px;height:150px;}</style><script>window.onload = function(){ ???var oDIV = document.getElementsByTagName(‘div‘)[0]; ???var oUl = oDIV.getElementsByTagName(‘ul‘)[0]; ???var arrLi = oUl.getElementsByTagName(‘li‘); ???var arrA = document.getElementsByTagName(‘a‘); ???????var timer = null; ???var speed = 10; ???oUl.innerHTML += oUl.innerHTML; ???oUl.style.width = arrLi.length*arrLi[0].offsetWidth+‘px‘; ???timer = setInterval(scrollPicture,100) ???????arrA[0].onclick = function(){ ???????speed = -10; ???}; ???arrA[1].onclick = function(){ ???????speed = 10; ???}; ???????for(var i=0;i<arrLi.length;i++){ ???????arrLi[i].onmouseover = function(){ ???????????clearInterval(timer); ???????} ???????????????arrLi[i].onmouseout = function(){ ???????????timer = setInterval(scrollPicture,100) ???????} ???} ???/*原理：走到一半给拉回来*/ ???function scrollPicture(){ ???????if(oUl.offsetLeft < -oUl.offsetWidth/2){ //向左走 ???????????oUl.style.left = 0; ???????}else if(oUl.offsetLeft >0){ ???????????oUl.style.left = -oUl.offsetWidth/2+‘px‘; //向右走 ???????} ???????oUl.style.left = oUl.offsetLeft+speed+‘px‘; ???} ???????};</script></head><body> ???<a href="javascript:;"> < </a> ???<a href="javascript:;"> > </a> ???<div> ???????<ul> ???????????<li><img src="images/1.jpg"></li> ???????????<li><img src="images/2.jpg"></li> ???????????<li><img src="images/3.jpg"></li> ???????????<li><img src="images/4.jpg"></li> ???????</ul> ???</div></body></html>js 图片实现无缝滚动
原文地址：https://www.cnblogs.com/moon-yyl/p/9011622.html