javascript單張多張圖無縫滾動的實現(xiàn)方法

這篇文章主要講解了javascript單張多張圖無縫滾動的實現(xiàn)方法，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。

成都創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站制作、成都做網(wǎng)站與策劃設(shè)計,昭蘇網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:昭蘇等地區(qū)。昭蘇做網(wǎng)站價格咨詢:13518219792

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)運動的效果
		}
		timer=setInterval(fnMove,30);
		aA[0].onclick=function(){
			iSpeed=-10;
//按下左箭頭，定義向左運動
		}
		aA[1].onclick=function(){
			iSpeed=10;
//按下右箭頭，定義向右運動
		}
		oDiv.onmouseover=function(){
			clearInterval(timer);
//鼠標(biāo)移動到圖片上，清除定時器，停止運動
		}
		oDiv.onmouseout=function(){
			timer=setInterval(fnMove,30);
//鼠標(biāo)移出，重新開啟定時器，重新運動
		}
	};
</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 ></div>
	</ul>
</div>
</body>
</html>

內(nèi)容補充：

背景：

想要實現(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:
        // 默認向上滾動，如果滾動的盒子的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)
  }
}

看完上述內(nèi)容，是不是對javascript單張多張圖無縫滾動的實現(xiàn)方法有進一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁題目：javascript單張多張圖無縫滾動的實現(xiàn)方法
新聞來源：http://www.chinadenli.net/article48/ishpep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、App設(shè)計、動態(tài)網(wǎng)站、網(wǎng)站策劃、微信小程序、自適應(yīng)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

javascript單張多張圖無縫滾動的實現(xiàn)方法