我們會看到很多的網站上會使用多張圖片無縫滾動的效果。
下面我就介紹幾種純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>