快捷導(dǎo)航

javascript單張多張圖無縫滾動實例代碼

更新時間：2020年05月10日 15:11:25 作者：藏色散人

在本篇文章里小編給大家分享的是關(guān)于javascript單張多張圖無縫滾動實例代碼和實例，需要的朋友們可以參考下。

我們會看到很多的網(wǎng)站上會使用多張圖片無縫滾動的效果。

下面我就介紹幾種純JS實現(xiàn)多張圖片的無縫滾動，并實現(xiàn)鼠標(biāo)移到圖片上運(yùn)動停止的效果，可以控制圖片左右滾動。

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;//定義圖片可以循環(huán)播放
		oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';//定義外層ul的寬度，根據(jù)圖片的個數(shù)和每個圖片的寬度計算，保證總寬度是可調(diào)整的
		function fnMove(){
			if(oUl.offsetLeft<-oUl.offsetWidth/2){
				oUl.style.left=0;
			}else if(oUl.offsetLeft>0){
				oUl.style.left=-oUl.offsetWidth/2+'px';
			}//定義到邊界的時候，實現(xiàn)無縫銜接
			oUl.style.left=oUl.offsetLeft+iSpeed+'px';
//定義圖片的右邊距隨著速度不斷不斷增加，或減小，實現(xiàn)運(yùn)動的效果
		}
		timer=setInterval(fnMove,30);
		aA[0].onclick=function(){
			iSpeed=-10;
//按下左箭頭，定義向左運(yùn)動
		}
		aA[1].onclick=function(){
			iSpeed=10;
//按下右箭頭，定義向右運(yùn)動
		}
		oDiv.onmouseover=function(){
			clearInterval(timer);
//鼠標(biāo)移動到圖片上，清除定時器，停止運(yùn)動
		}
		oDiv.onmouseout=function(){
			timer=setInterval(fnMove,30);
//鼠標(biāo)移出，重新開啟定時器，重新運(yùn)動
		}
	};
</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>

內(nèi)容補(bǔ)充：

背景：

想要實現(xiàn)圖片持續(xù)滾動，既然使用js,就千萬不要加css動畫、過渡等相關(guān)樣式，如果想要滾動的平滑一下，可以一像素一像素的感動，則很平滑，如果加了過渡動畫，當(dāng)圖片重置為0時，會有往回倒的動畫效果，跟預(yù)期不符。

原理：

圖片滾動原理同圖片輪播原理，同樣也適用于文字滾動等一系列滾動，通過復(fù)制最后一張圖片或最后一堆文字插入第一行，或復(fù)制第一張圖片或一堆文字插入在結(jié)尾，來實現(xiàn)無縫拼接，前提：1、必須是沒有設(shè)置過渡動畫的，2、重置為0的時候與當(dāng)前已經(jīng)滾動到的高度對于圖片的位置而言肉眼看上去沒變化。

實現(xiàn)：

html主要包含三塊：

1、最外層盒子，用來展示滾動圖的區(qū)域，overflow:hidden;

2、滾動的盒子，主要改變該盒子的定位值，來實現(xiàn)滾動，里面包含所有要滾動的圖片或文字

3、包含圖片或文字的盒子。

代碼：

class Roll {
  constructor(opts) {
    this.elem = opts.elem; // 圖片包含滾動長度的元素的
    this.elemBox = opts.elemBox; //圖片展示區(qū)域元素，為了獲取展示區(qū)域的高度
    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:
        // 默認(rèn)向上滾動，如果滾動的盒子的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單張多張圖無縫滾動實例代碼的詳細(xì)內(nèi)容，更多關(guān)于javascript圖片無縫滾動的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: