我们会看到很多的网站上会使用多张图片无缝滚动的效果。下面我就介绍几种纯JS实现多张图片的无缝滚动，并实现鼠标移到图片上运动停止的效果，可以控制图片左右滚动。
<!DOCTYPE html>
<html>
<head>
<title>javascript单张多张图无缝滚动实例代码</title>
</head>
<style type="text/css">
*{margin: 0;padding: 0;}
#div1{position: relative;border:1px solid #0ff;width:1100px; height: 180px;margin:50px auto 0;overflow: hidden;}
#div1 ul{position: absolute;left: 0;}
#div1 ul li{list-style: none;width:200px;float: left;padding: 10px;height: 160px;}
#div1 ul li img{width:100%;}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var aA=document.getElementsByTagName('a');//获取向右向左的箭头
var timer=null;
var iSpeed=1;
oUl.innerHTML+=oUl.innerHTML;//定义图片可以循环播放
oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';//定义外层ul的宽度，根据图片的个数和每个图片的宽度计算，保证总宽度是可调整的
function fnMove(){
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+iSpeed+'px';
//定义图片的右边距随着速度不断不断增加，或减小，实现运动的效果
}
timer=setInterval(fnMove,30);
aA[0].onclick=function(){
iSpeed=-1;
//按下左箭头，定义向左运动
}
aA[1].onclick=function(){
iSpeed=1;
//按下右箭头，定义向右运动
}
oDiv.onmouseover=function(){
clearInterval(timer);
//鼠标移动到图片上，清除定时器，停止运动
}
oDiv.onmouseout=function(){
timer=setInterval(fnMove,20);
//鼠标移出，重新开启定时器，重新运动
}
};
</script>
<body>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" >←</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" >→</a>
<div id="div1">
<ul>
<li><img src="images/banner_1.jpg"></li>
<li><img src="images/banner_2.jpg"></li>
<li><img src="images/banner_3.jpg"></li>
<li><img src="images/banner_2.jpg"></li>
<li><img src="images/banner_1.jpg"></li>
<div style="clear: none;"></div>
</ul>
</div>
</body>
</html>
查看更多关于javascript单张多张图无缝滚动实例代码的详细内容...