設計思想：在一個Div內存放兩個相同內容（使用一行多列表格）作為一個滾動對象，並將超出的寬度的內容隱藏，在JS腳本中定義Div向移動的方法（水平坐標加1）。當第一個內容完全消失（即Div向左移動的距離達到該Div的寬度，此時第二個內容完全顯示)時，將滾動條的坐標復位，開始新的一輪。
代碼如下：
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>一組圖片循環且首尾相連的滾動效果</title> <style> #bg{ width:940px;height:300px; background：url(images/精品展示.jpg); } #sm{/*滾動對象樣式*/ overflow:hidden;/*隱藏Div中多余的內容，增加圖片會一起滾動*/ width:920px;height:280px; margin:0 auto; padding-top:30px; } </style> </head> <body> <center> <div id="bg"> <div id="sm"> <!--滾動div--> <table> <!--外表格1x2,且第2單元格是空的--> <tr> <td id="Pic1"> <table> <!--內表格1x9,存放9張圖片--> <tr> <td><img src="images/1.jpg" οnmοuseοver="mouseover(this)" οnmοuseοut="mouseout(this)"/></td> <td><img src="images/2.jpg" οnmοuseοver="mouseover(this)" οnmοuseοut="mouseout(this)"/></td> <td><img src="images/3.jpg" οnmοuseοver="mouseover(this)" οnmοuseοut="mouseout(this)"/></td> <td><img src="images/4.jpg" οnmοuseοver="mouseover(this)" οnmοuseοut="mouseout(this)"/></td> <td><img src="images/5.jpg" οnmοuseοver="mouseover(this)" οnmοuseοut="mouseout(this)"/></td> <td><img src="images/6.jpg" οnmοuseοver="mouseover(this)" οnmοuseοut="mouseout(this)"/></td> <td><img src="images/7.jpg" οnmοuseοver="mouseover(this)" οnmοuseοut="mouseout(this)"/></td> <td><img src="images/8.jpg" οnmοuseοver="mouseover(this)" οnmοuseοut="mouseout(this)"/></td> <td><img src="images/9.jpg" οnmοuseοver="mouseover(this)" οnmοuseοut="mouseout(this)"/></td> </tr> </table> </td> <td id="Pic2"></td> </tr> </table> </div> </div> </center> <!--下面內容的客戶端腳本不可放置在頁面頭部--> <script> Pic2.innerHTML=Pic1.innerHTML;//復制一組圖片，但被隱藏 function scrolltoleft(){//定義向左移動的方法 sm.scrollLeft++;//改變層的水平坐標，實現向左移動 if(sm.scrollLeft>=Pic1.scrollWidth)//需要復位 sm.scrollLeft=0;//層的位置復位，瀏覽器窗口的寬度有限的 } var MyMar=setInterval(scrolltoleft,40); //定時器，方法名后不可加() function mouseover(x){//放大圖片 x.style.width="210"; x.style.height="256" x.style.cursor="pointer" } function mouseout(x){//圖片復原 x.style.width="105"; x.style.height="128" } //兩面兩行是用方法響應對象的事件 sm.οnmοuseοver=function(){//匿名方法（函數） clearInterval(MyMar);//停止滾動 } sm.οnmοuseοut=function(){ MyMar = setInterval(scrolltoleft,40);//繼續滾動 } </script> </body> </html>