javascript單張多張圖無縫滾動例項程式碼
阿新 • • 發佈：2020-05-12
我們會看到很多的網站上會使用多張圖片無縫滾動的效果。
下面我就介紹幾種純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:;" rel="external nofollow" rel="external nofollow" >←</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" >→</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>內容補充：
背景：
想要實現圖片持續滾動，既然使用js,就千萬不要加css動畫、過渡等相關樣式，如果想要滾動的平滑一下，可以一畫素一畫素的感動，則很平滑，如果加了過渡動畫，當圖片重置為0時，會有往回倒的動畫效果，跟預期不符。
原理：
圖片滾動原理同圖片輪播原理，同樣也適用於文字滾動等一系列滾動，通過複製最後一張圖片或最後一堆文字插入第一行，或複製第一張圖片或一堆文字插入在結尾，來實現無縫拼接，前提：1、必須是沒有設定過渡動畫的，2、重置為0的時候與當前已經滾動到的高度對於圖片的位置而言肉眼看上去沒變化。
實現：
html主要包含三塊：
1、最外層盒子，用來展示滾動圖的區域，overflow:hidden;
2、滾動的盒子，主要改變該盒子的定位值，來實現滾動，裡面包含所有要滾動的圖片或文字
3、包含圖片或文字的盒子。
程式碼：
class Roll {
constructor(opts) {
this.elem = opts.elem; // 圖片包含滾動長度的元素的
this.elemBox = opts.elemBox; //圖片展示區域元素，為了獲取展示區域的高度
this.direction = opts.direction;
this.time = opts.time;
this.init();
this.roll = this.roll.bind(this)
this.startRoll = this.startRoll.bind(this)
this.stopRoll = this.stopRoll.bind(this)
}
init(){
this.elemHeight = this.elem.offsetHeight;
this.elemHtml = this.elem.innerHTML;
this.elem.innerHTML = this.elem.innerHTML + this.elemHtml+ this.elemHtml;
this.speed;
// 如果向上滾或者向左滾動每次減1，向下滾或者向右滾動每次加1
if(this.direction === 'top' || this.direction === 'left'){
this.speed = -1;
}else{
this.speed = 1;
}
}
roll(){
switch (this.direction) {
case "top":
// 如果滾動的盒子的top值超出元素的高度，則置為0
if(Math.abs(this.elemBox.offsetTop) >= this.elemHeight){
this.elemBox.style.top = 0;
}else{
this.elemBox.style.top = this.elemBox.offsetTop + this.speed + 'px';
}
break;
case "bottom":
// 如果滾動的盒子的bottom值超出元素的高度，則置為0
if(Math.abs(this.elemBox.offsetBottom) >= this.elemHeight){
this.elemBox.style.bottom = 0;
}else{
this.elemBox.style.bottom = this.elemBox.offsetBottom + this.speed + 'px';
}
break;
case "left":
// 如果滾動的盒子的left超出元素的高度，則置為0
if(Math.abs(this.elemBox.offsetLeft) >= this.elemHeight){
this.elemBox.style.left = 0;
}else{
this.elemBox.style.left = this.elemBox.offsetLeft + this.speed + 'px';
}
break;
case "right":
// 如果滾動的盒子的right超出元素的高度，則置為0
if(Math.abs(this.elemBox.offsetRight) >= this.elemHeight){
this.elemBox.style.right = 0;
}else{
this.elemBox.style.right = this.elemBox.offsetRight + this.speed + 'px';
}
break;
default:
// 預設向上滾動，如果滾動的盒子的top超出元素的高度，則置為0
if(Math.abs(this.elemBox.offsetTop) >= this.elemHeight){
this.elemBox.style.top = 0;
}else{
this.elemBox.style.top = this.elemBox.offsetTop + speed + 'px';
}
}
}
stopRoll(){
clearInterval(this.scrollTimer)
}
startRoll(){
this.scrollTimer = setInterval(this.roll,this.time)
}
}以上就是javascript單張多張圖無縫滾動例項程式碼的詳細內容，更多關於javascript圖片無縫滾動的資料請關注我們其它相關文章！