本文介绍如何使用JavaScript实现图片的无缝向左滚动效果，并支持自定义滚动速度。核心思路是通过复制一组图片追加到原组末尾，利用定时器不断改变容器滚动条位置，当滚动距离超过原图宽度时重置为0，从而形成视觉上的无限循环滚动。
可自定义速度的JS图片无缝滚动实现
实现思路：
首先准备一组图片，通过控制其容器的滚动条实现滚动效果。接着，将这组图片的内容完整复制一份，并追加到原图片组的末尾，此时容器中实际上包含了两组相同的图片。当滚动条继续移动，原图片组的最后一张图滚出可视区域顶部时，复制组的第一张图恰好进入视野，填补空缺，从而在视觉上形成无缝循环滚动的效果。
具体代码实现如下：
<!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>