使用jQuery簡單實現產品展示的圖片左右滾動功能

效果如下所示：

原理比較簡單：將要滾動顯示的區域的CSS的override設為hidden，寬度設成一個比較大的值，如4000px,然後每次點擊上一頁或下一頁的按鈕時，計算當前頁數，如果已經到了最後一頁，則回到第一頁，滾動是通過控制div的left屬性實現的，需要兩個div，外面的div的position設為retative，裡面的DIV的position設為absolute。

主要代碼如下：

HTML:

[html]

1. <div id="product">  
2.     <h2><span class="arrow">arrow</span>產品展示</h2>  
3.     <span class="prev"></span>  
4.     <div id="content">  
5.     <div id="content_list">  
6.     <dl>  
7.         <dt><img src="images/product1.jpg"/></dt>  
8.         <dd>數據采集移動終端</dd>  
9.     </dl>  
10.     <dl>  
11.         <dt><img src="images/product2.jpg"/></dt>  
12.         <dd>數據采集移動終端</dd>  
13.     </dl>  
14.     <dl>  
15.         <dt><img src="images/product3.jpg"/></dt>  
16.         <dd>數據采集移動終端</dd>  
17.     </dl>  
18.     <dl>  
19.         <dt><img src="images/product3.jpg"/></dt>  
20.         <dd>數據采集移動終端</dd>  
21.     </dl>  
22.     <dl>  
23.         <dt><img src="images/product1.jpg"/></dt>  
24.         <dd>數據采集移動終端1</dd>  
25.     </dl>  
26.     <dl>  
27.         <dt><img src="images/product1.jpg"/></dt>  
28.         <dd>數據采集移動終端1</dd>  
29.     </dl>  
30.     <dl>  
31.         <dt><img src="images/product1.jpg"/></dt>  
32.         <dd>數據采集移動終端1</dd>  
33.     </dl>  
34.     </div>  
35.     </div>  
36.     <span class="next"></span>  
37. </div>  

CSS:

1. #product {  
2.     width:720px;  
3.     height:200px;  
4.     border:1px solid #ccc;  
5.     margin:0 5px 5px 0;  
6.     float:left;  
7. }  
8. #product div#content {  
9.     position:relative;  
10.     width:690px;  
11.     height:160px;  
12.     display:inline-block;  
13.     overflow:hidden;  
14.     float:left;  
15. }  
16. #product div#content_list {  
17.     position:absolute;  
18.     width:4000px;  
19. }  
20. #product dl{  
21.     width:160px;  
22.     height:150px;  
23.     float:left;  
24.     margin:10px 4px;  
25.     padding:2px 2px;  
26. }  
27. #product dl:hover {  
28.     border:1px solid #333;  
29.     background:#ccc;  
30. }  
31. #product dl dt {  
32.       
33. }  
34. #product dl dt img {  
35.     width:160px;  
36.     height:120px;  
37.     border:none;  
38. }  
39. #product dl dd {  
40.     text-align:center;  
41. }  
42. #product span.prev{  
43.     cursor:pointer;  
44.     display:inline-block;  
45.     width:15px;  
46.     height:150px;  
47.     background:url(../images/arrow_l.gif) no-repeat left center;  
48.     float:left;  
49. }  
50. #product span.next{  
51.     cursor:pointer;  
52.     display:inline-block;  
53.     width:15px;  
54.     height:150px;  
55.     background:url(../images/arrow_r.gif) no-repeat left center;  
56.     float:right;  
57. }  

js代碼

1. $(function(){  
2.     var page = 1;  
3.     var i = 4; //每版放4個圖片   
4.     //向後 按鈕   
5.     $("span.next").click(function(){    //綁定click事件   
6.          var content = $("div#content");   
7.          var content_list = $("div#content_list");  
8.          var v_width = content.width();  
9.          var len = content.find("dl").length;  
10.          var page_count = Math.ceil(len / i) ;   //只要不是整數，就往大的方向取最小的整數   
11.          if( !content_list.is(":animated") ){    //判斷“內容展示區域”是否正在處於動畫   
12.               if( page == page_count ){  //已經到最後一個版面了,如果再向後，必須跳轉到第一個版面。   
13.                 content_list.animate({ left : '0px'}, "slow"); //通過改變left值，跳轉到第一個版面   
14.                 page = 1;  
15.               }else{  
16.                 content_list.animate({ left : '-='+v_width }, "slow");  //通過改變left值，達到每次換一個版面   
17.                 page++;  
18.              }  
19.          }  
20.    });  
21.     //往前 按鈕   
22.     $("span.prev").click(function(){  
23.          var content = $("div#content");   
24.          var content_list = $("div#content_list");  
25.          var v_width = content.width();  
26.          var len = content.find("dl").length;  
27.          var page_count = Math.ceil(len / i) ;   //只要不是整數，就往大的方向取最小的整數   
28.          if(!content_list.is(":animated") ){    //判斷“內容展示區域”是否正在處於動畫   
29.              if(page == 1 ){  //已經到第一個版面了,如果再向前，必須跳轉到最後一個版面。   
30.                 content_list.animate({ left : '-='+v_width*(page_count-1) }, "slow");  
31.                 page = page_count;  
32.             }else{  
33.                 content_list.animate({ left : '+='+v_width }, "slow");  
34.                 page--;  
35.             }  
36.         }  
37.     });  
38. });