JavaScript实现图片的无缝滚动

html部分

//展示窗口
<div class="showWin">
	//包裹图片的div
	<div class="wrapper">
		<img src="img/1.jpg" title="小奶妈">
		<img src="img/2.jpg" title="大乔">
		<img src="img/3.jpg" title="李白">
		<img src="img/4.jpg" title="杨玉环">
		<img src="img/5.jpg" title="刘备">
	</div>
</div>

css部分

*{
	margin: 0;
	padding: 0;
}
.showWin{
	width: 700px;
	height: 279px;
	position: relative;
	border: 1px solid gray; 
	overflow: hidden;//溢出隐藏
}
.wrapper{
	width: 2500px;
	height: 279px;
	position: absolute;//为包裹图片的div设置绝对定位
}
img{
	float: left;
}

js代码部分

//先获取两个div
var win = document.getElementsByClassName('showWin')[0];
var wrap = document.getElementsByClassName('wrapper')[0];
//新创建一个div，将wrap里的图片复制一份
var wrap2 = document.createElement('div');
wrap2.innerHTML = wrap.innerHTML;
wrap2.className = wrap.className;
win.appendChild(wrap2);//将这个新创建的div添加到展示窗口win中
var left = 0;//第一个包裹图片的div的距离浏览器的left
var left2 = 2500;//新创建的div距离浏览器左边的位置
function show(){
	//两个div都逐渐向左移
	left --;
	left2 --;
	wrap.style.left = left + 'px';
	wrap2.style.left = left2 + 'px';
	//当第一个包裹图片的div不可见之后
	if(left <= -2500){
		//将它放到第二个div的后面去
		left = 2500;
	}
	//当第二个div也走完之后，再将它放到后面去，这样就能实现图片的无缝滚动啦
	if(left2 <= -2500){
		left2 = 2500;
	}
}
//鼠标移入时，图片停止滚动
win.onmouseover = function(){
	clearInterval(timer)
}
//鼠标移出，图片继续滚动
win.onmouseout = function(){
	timer = setInterval(show,20)
}
//创建定时器，20毫秒执行一次show函数
var timer = setInterval(show,20)

以下是实现效果图，将就着看吧