纯JS实现多张图片无缝滚动和多张图片上下滚动的效果--JavaScript实例集锦（初学）
我们会看到很多的网站上会使用多张图片无缝滚动的效果。
下面我就介绍几种纯JS实现多张图片的无缝滚动，并实现鼠标移到图片上运动停止的效果，可以控制图片左右滚动。
1.效果展示：
代码实现：
<!DOCTYPE html>
<html>
<head>
<title>无缝滚动</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=10;
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=-10;
//按下左箭头，定义向左运动
}
aA[1].onclick=function(){
iSpeed=10;
//按下右箭头，定义向右运动
}
oDiv.onmouseover=function(){
clearInterval(timer);
//鼠标移动到图片上，清除定时器，停止运动
}
oDiv.onmouseout=function(){
timer=setInterval(fnMove,30);
//鼠标移出，重新开启定时器，重新运动
}
};
</script>
<body>
<a href="javascript:;">←</a>
<a href="javascript:;">→</a>
<div id="div1">
<ul>
<li><img src="miaoflash/images/1.jpg"></li>
<li><img src="miaoflash/images/2.jpg"></li>
<li><img src="miaoflash/images/3.jpg"></li>
<li><img src="miaoflash/images/4.jpg"></li>
<li><img src="miaoflash/images/5.jpg"></li>
<div style="clear: none;"></div>
</ul>
</div>
</body>
</html>
使用函数，此代码更为简便。
2.简易的无缝滚动：
效果图：
只朝一个方向滚动，鼠标移入暂停滚动，鼠标移出，滚动继续，没有使用单独的函数
代码实现：
<!DOCTYPE html> <html> <head> <title>无缝滚动</title> <style type="text/css"> *{margin:0;padding: 0;} .roll .wrap{width:1500px;overflow: hidden; height: 344px;margin: 0 auto;position: relative;} .roll li{float: left;list-style: none;width: 700px;height: 344px;} .roll ul{position: absolute;top: 0;left: 0;} } </style> <script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementById('roll'); var oUl=oDiv.getElementsByTagName('ul')[0]; var aLi=oUl.getElementsByTagName("li"); var iSpeed=-5; var timer=null; oUl.style.width=aLi[0].offsetWidth*aLi.length+'px'; timer=setInterval(function(){ oUl.style.left=oUl.offsetLeft+iSpeed+'px'; if(oUl.offsetLeft<-oUl.offsetWidth/2){ oUl.style.left='0px'; } },30); oUl.onmouseover=function(){ clearInterval(timer); } oUl.onmouseout=function(){ timer=setInterval(function(){ oUl.style.left=oUl.offsetLeft+iSpeed+'px'; if(oUl.offsetLeft<-oUl.offsetWidth/2){ oul.style.left='0px'; } },30); } }; </script> </head> <body> <div class="roll" id="roll"> <div class="wrap"> <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> </div> </body> </html>
3.上下滚动：效果图：
代码实现：
<!DOCTYPE html> <html> <head> <title>上下滚动</title> <style type="text/css"> *{margin:0;padding: 0;} div#miaovslide {text-align: center;} .wrap{width:500px;overflow: hidden; height: 700px;margin: 0 auto;position: relative;} .wrap img{width: 100%;} li{list-style: none;width: 700px;height: 344px;padding: 10px 0;} ul{position: absolute;top: 0;left: 0;} } </style> <script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementById('miaovslide'); var oUl=oDiv.getElementsByTagName('ul')[0]; var aLi=oUl.getElementsByTagName('li');//获取所有的li var oUp=document.getElementById('up');//获取向上轮播的按钮 var oDown=document.getElementById('down');//获取向下轮播的按钮 var timer=null;//定义定时器 var iSpeed=0;//定义初始速度 oUl.innerHTML+oUl.innerHTML; //实现循环无间断的图片流 oUp.onmousedown=function(){ timer=setInterval(doMove,30); iSpeed=-5; //当按下向左的按钮时，设置速度为负，即向上滚动 }; oUp.onmouseup=function(){ clearInterval(timer); //当抬起鼠标时，清除定时器 }; oDown.onmousedown=function(){ iSpeed=5; timer=setInterval(doMove,30); //当鼠标按下向右的按钮时，设置速度为正，即向下滚动 } oDown.onmouseup=function(){ clearInterval(timer); //当鼠标抬起时，清除定时器 } function doMove(){ oUl.style.top=oUl.offsetTop+iSpeed+'px'; if(oUl.offsetTop<-oUl.offsetHeight/2){ oUl.style.top='0px'; }else if(oUl.offsetTop>0){ oUl.style.top=-oUl.offsetHeight/2+'px'; } }; }; </script> </head> <body> <div class="slide_module" id="miaovslide"> <div id="up"><img src="images/prevup.png"></div> <div class="wrap"> <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> <div id="down"><img src="images/nextdown.png"></div> </div> </body> </html>
