css：

#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;
 }

html：

//內容根據需要自行更換

<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:

<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顯示的內容與左側影藏的內容寬度相同時將父容器左側影藏的內容顯示出來，這樣就實現了將左側影藏的內容顯示出來同時將右側內容重新隱藏。如果右側內容顯示的部分少於左側影藏的內容就繼續講父容器想左側移動，實現隱藏。其中有一點需要注意的是，由於這裡是將兩張圖片同時放入左側，當右側顯示了一半時會將左側影藏的完全顯示出來，又因為右側顯示的內容與左側的左邊內容相同所以實現了迴圈滾動的效果。

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

原文：https://www.jb51.net/article/83623.htm