上一次寫了一個圖片自動滾動功能，沒有左右按鈕控制的功能。今天花了點時間，寫了一個帶有左右按鈕控制的圖片滾動效果。所謂自動滾動，原理就是周期性的執行一個效果。在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下載
如有不足之處，還請大家提出寶貴意見，謝謝