帶有控制按鈕的圖片滾動(dòng)
上一次寫(xiě)了一個(gè)圖片自動(dòng)滾動(dòng)功能，沒(méi)有左右按鈕控制的功能。今天花了點(diǎn)時(shí)間，寫(xiě)了一個(gè)帶有左右按鈕控制的圖片滾動(dòng)效果。所謂自動(dòng)滾動(dòng)，原理就是周期性的執(zhí)行一個(gè)效果。
在js中，通常是用setInterval這個(gè)函數(shù)來(lái)執(zhí)行的，setInterval(func,speed),func表示所要執(zhí)行的函數(shù)，speed表示周期時(shí)間，通常用毫秒來(lái)表示。
先看一下效果圖：
這里一共有5張圖片，而現(xiàn)在為什么只顯示4張呢？這里用了css的overflow屬性控制一下，我們不可能把所有要滾動(dòng)的圖片都顯示出來(lái)，那樣滾動(dòng)就毫無(wú)意義了，用戶不要滾動(dòng)，就可以看到所有的圖片了，也影響頁(yè)面圖片的加載時(shí)間。所以要把一些圖片隱藏起來(lái)。
overflow的作用就是子級(jí)的寬度超過(guò)了父級(jí)的寬度，那么子級(jí)超過(guò)的寬度為隱藏起來(lái)，當(dāng)然內(nèi)容也會(huì)隱藏起來(lái)。
- .subBox {
- padding: 0;
- margin: 0 10px;
- width: 830px;
- overflow: hidden;
- }
- .subBox ul {
- width: 100000px;
- }
還有一點(diǎn)要做到無(wú)間隙的滾動(dòng)，子級(jí)的寬度很寬，可顯示區(qū)域如果滾動(dòng)完了，就會(huì)出現(xiàn)空白，這里也考慮到了這一點(diǎn)，解決的方式是：向左滾動(dòng)，就把最后一張圖片放到最前面去，向右滾動(dòng)就把第一張圖片放到后面去。
- obj.find("li:last").prependTo(obj);//向左滾動(dòng)
- obj.find("li:first").appendTo(obj);//向右滾動(dòng)
因?yàn)槭亲詣?dòng)滾動(dòng)的，當(dāng)用戶向鼠標(biāo)移到圖片上時(shí)讓他停止，這里就用到了clearInterval功能，表示停止周期性滾動(dòng)
- clearInterval(moving);
下一頁(yè)，讓我們?cè)倏淳唧w代碼
#p#
- <!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>帶有控制按鈕的圖片滾動(dòng)</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下載
原文鏈接：http://www.cnblogs.com/gaoyubao/archive/2012/06/21/2557502.html
