上一次写了一个图片自动滚动功能，没有左右按钮控制的功能。今天花了点时间，写了一个带有左右按钮控制的图片滚动效果。所谓自动滚动，原理就是周期性的执行一个效果。在js中，通常是用setInterval这个函数来执行的，setInterval(func,speed),func表示所要执行的函数，speed表示周期时间，通常用毫秒来表示。
先看一下效果图：
这里一共有5张图片，而现在为什么只显示4张呢？这里用了css的overflow属性控制一下，我们不可能把所有要滚动的图片都显示出来，那样滚动就毫无意义了，用户不要滚动，就可以看到所有的图片了，也影响页面图片的加载时间。所以要把一些图片隐藏起来。
overflow的作用就是子级的宽度超过了父级的宽度，那么子级超过的宽度为隐藏起来，当然内容也会隐藏起来。
.subBox { padding: 0; margin: 0 10px; width: 830px; overflow: hidden; } .subBox ul { width: 100000px; }
还有一点要做到无间隙的滚动，子级的宽度很宽，可显示区域如果滚动完了，就会出现空白，这里也考虑到了这一点，解决的方式是：向左滚动，就把最后一张图片放到最前面去，向右滚动就把第一张图片放到后面去。
obj.find("li:last").prependTo(obj);//向左滚动
obj.find("li:first").appendTo(obj);//向右滚动
因为是自动滚动的，当用户向鼠标移到图片上时让他停止，这里就用到了clearInterval功能，表示停止周期性滚动
clearInterval(moving);
具体代码如下：
<!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>带有控制按钮的图片滚动</title> <script src="jquery-1.7.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ var left = $("#left"); var right = $("#right"); var obj = $(".subBox ul"); var w = obj.find("li").innerWidth(); left.click(function(){ obj.find("li:last").prependTo(obj); obj.css("margin-left",-w); obj.animate({"margin-left": 0}); }); right.click(function(){ obj.animate({"margin-left": -w},function(){ obj.find("li:first").appendTo(obj); obj.css("margin-left","0"); }); }); var moving = setInterval(function(){left.click()},2000); obj.hover(function(){ clearInterval(moving); },function(){ moving = setInterval(function(){left.click()},2000); }) }); </script> <style type="text/css"> * { margin: 0; padding: 0; list-style: none; } .box { margin: 10px auto; width: 880px; text-align: left; } .floatL { padding-top: 45px; float: left; } .subBox { padding: 0; margin: 0 10px; width: 830px; overflow: hidden; } .subBox ul { width: 100000px; } .subBox ul li { width: 210px; float: left; } </style> </head> <body> <div class="box"> <div class="floatL" id="left"><img src="left.gif" alt="" /></div> <div class="subBox floatL"> <ul> <li><img src="0.jpg" alt="" /></li> <li><img src="1.jpg" alt="" /></li> <li><img src="2.jpg" alt="" /></li> <li><img src="3.jpg" alt="" /></li> <li><img src="4.jpg" alt="" /></li> </ul> </div> <div class="floatL" id="right"><img src="right.gif" alt="" /></div> </div> </body> </html>
效果下载地址：demo下载
如有不足之处，还请大家提出宝贵意见，谢谢