帶有控制按鈕的圖片滾動

作者：高玉寶 2012-06-21 13:08:37

在js中，通常是用setInterval這個函數來執行的，setInterval(func,speed),func表示所要執行的函數，speed表示周期時間，通常用毫秒來表示。

上一次寫了一個圖片自動滾動功能，沒有左右按鈕控制的功能。今天花了點時間，寫了一個帶有左右按鈕控制的圖片滾動效果。所謂自動滾動，原理就是周期性的執行一個效果。

在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);

下一頁，讓我們再看具體代碼

#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>帶有控制按鈕的圖片滾動</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

責任編輯：張偉來源：高玉寶的博客

jQuery