JS平滑無縫滾動效果的實作程式碼_javascript技巧

本文我們實現純JS方式的滾動廣告效果。

先show一下成品：

首先是網頁樣式：

 #demo {

 background: #FFF;

 overflow:hidden;

 border: 1px dashed #CCC;

 width: 1280px;

 height:200px;

 }

 #demo img {

 border: 3px solid #F2F2F2;

 }

 #indemo {

 float: left;

 width: 800%;

 }

 #demo1 {

 float: left;

 }

 #demo2 {

 float: left;

 }

版面如下：

 <div id="demo">

 <div id="indemo">

 <div id="demo1">

 <a href="#"><img  src="/static/imghwm/default1.png"  data-src="banner.jpg"  class="lazy" border="0" / alt="JS平滑無縫滾動效果的實作程式碼_javascript技巧" ></a>

 <a href="#"><img  src="/static/imghwm/default1.png"  data-src="banner2.jpg"  class="lazy" border="0" / alt="JS平滑無縫滾動效果的實作程式碼_javascript技巧" ></a>

 </div>

 <div id="demo2"></div>

 </div>

 </div>

具體的JS實作：

 <script>

 var speed=10;

 var tab=document.getElementById("demo");

 var tab1=document.getElementById("demo1");

 var tab2=document.getElementById("demo2");

 tab2.innerHTML=tab1.innerHTML;

 function Marquee(){

 if(tab2.offsetWidth-tab.scrollLeft==0)

 tab.scrollLeft-=tab1.offsetWidth

 else{

 tab.scrollLeft++;

 }

 }

 var MyMar=setInterval(Marquee,speed);

 tab.onmouseover=function() {clearInterval(MyMar)};

 tab.onmouseout=function() {MyMar=setInterval

 (Marquee,speed)};

 </script>

這裡要注意的是：

scrollLeft代表頁面利用捲軸滾動到右側時，隱藏在捲軸左側的頁面的寬度。

offsetWidth 是物件的可見寬度，包裝捲軸等邊線，會隨視窗的顯示大小改變。

setInterval() 方法可依照指定的周期(以毫秒計)來呼叫函數或計算表達式。 setInterval() 方法會不停地呼叫函數,直到 clearInterval() 被呼叫或視窗被關閉。

明白了這個具體的實現就好理解了。

實現的原理是這樣的：首先將需要滾動的內容複製一份。當右側的div顯示的內容與左側影藏的內容寬度相同時將父容器左側影藏的內容顯示出來，這樣就實現了將左側影藏的內容顯示出來同時將右側內容重新隱藏。如果右側內容顯示的部分少於左側影藏的內容就繼續講父容器想左側移動，實現影藏。其中有一點要注意的是，由於這裡是將兩張圖片同時放入左側，當右側顯示了一半時會將左側影藏的完全顯示出來，又因為右側顯示的內容與左側的左邊內容相同所以實現了循環滾動的效果。

這樣平滑的滾動就實現了。

以上這篇JS平滑無縫滾動效果的實現代碼就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。