一組圖片 控制它的滾動條進行滾動 且此時對這組圖片進行復制并添加進原圖片組中，現在就有兩組圖片了。你可以想象一下，現在滾動條繼續滾動，原來那組圖片最后一張圖片已經滾至頂端且消失，復制的那組圖片的第一張跟在原圖最后一張圖片后出現，此時你就能感覺到無縫滾動了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS圖片向左滾動</title>
<style type="text/css">
img{
border: none;
}
</style>
</head>
<body>
<div id="demo" style="overflow:hidden;width:500px;">
<table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 >
<tr>
<td id="demo1" valign="top" bgcolor="ffffff">
<!-- 特別注意，下面的圖片總寬度必須大于上面定義的demo的寬度，如上面demo的寬度為500px,則下面圖片總寬度必須大于500,否則會出現些問題！ -->
<table border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td><a href="#" target="_blank"><img src="images/1.jpg" width="150" height="100"></a></td>
<td><a href="#" target="_blank"><img src="images/2.jpg" width="150" height="100"></a></td>
<td><a href="#" target="_blank"><img src="images/3.jpg" width="150" height="100"></a></td>
<td><a href="#" target="_blank"><img src="images/4.jpg" width="150" height="100"></a></td>
<td><a href="#" target="_blank"><img src="images/5.jpg" width="150" height="100"></a></td>
</tr>
</table>
</td>
<td id="demo2" valign="top">
</td>
</tr>
</table>
</div>
<div id="msg"></div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//0:定速度
var speed = 30;
//1:獲取元素 demo demo1 demo2
var demo = $("#demo");
var demo1 = $("#demo1");
var demo2 = $("#demo2");
//2:復制 demo1-->demo2
var cont = $("#demo1").html();
$("#demo2").html(cont);
//3:創建方法定時執行
function hello(){
var left = $("#demo").scrollLeft();
if(left >= $("#demo1").width()){
left = 0;
}else{
left++;
}
$("#demo").scrollLeft(left);
setTimeout("hello()",speed);
}
hello();
// 移動demo.scrollLeft();
</script>
</body>
</html>
