可自定义速度的JS图片无缝滚动实现

可自定义速度的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>