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

相关推荐