使用jQuery简单实现产品展示的图片左右滚动功能

使用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:

[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代码

[javascript]

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