使用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 {
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. });