這篇文章主要為大家詳細介紹了javascript實現(xiàn)平滑無縫滾動的具體代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下

首先是網(wǎng)頁樣式：

#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="banner.jpg" border="0" /></a>

<a href="#"><img src="banner2.jpg" border="0" /></a>

</div>

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

</div>

</div>

具體的JS實現(xiàn)：

<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代表頁面利用滾動條滾動到右側(cè)時，隱藏在滾動條左側(cè)的頁面的寬度。

offsetWidth 是對象的可見寬度，包滾動條等邊線，會隨窗口的顯示大小改變。

setInterval() 方法可按照指定的周期(以毫秒計)來調(diào)用函數(shù)或計算表達式。setInterval() 方法會不停地調(diào)用函數(shù),直到 clearInterval() 被調(diào)用或窗口被關(guān)閉。

明白了這個具體的實現(xiàn)就好理解了。

實現(xiàn)的原理是這樣的：首先將需要滾動的內(nèi)容復(fù)制一份。當(dāng)右側(cè)的div顯示的內(nèi)容與左側(cè)影藏的內(nèi)容寬度相同時將父容器左側(cè)影藏的內(nèi)容顯示出來，這樣就實現(xiàn)了將左側(cè)影藏的內(nèi)容顯示出來同時將右側(cè)內(nèi)容重新隱藏。如果右側(cè)內(nèi)容顯示的部分少于左側(cè)影藏的內(nèi)容就繼續(xù)講父容器想左側(cè)移動，實現(xiàn)隱藏。其中有一點需要注意的是，由于這里是將兩張圖片同時放入左側(cè)，當(dāng)右側(cè)顯示了一半時會將左側(cè)影藏的完全顯示出來，又因為右側(cè)顯示的內(nèi)容與左側(cè)的左邊內(nèi)容相同所以實現(xiàn)了循環(huán)滾動的效果。

這樣平滑的滾動就實現(xiàn)了。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。