Using jQuery to simply implement the product display picture left and right scrolling function of sample code

Recently to do a product display function, because the product is more, a screen display is not over, so want to do a click to turn the page effect, on the Internet to find a few are not very good, finally can only write by yourself.

The effect is as follows:

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201401/20140102092128.png ">

The principle is simple: Will scroll override set as hidden area of the CSS width into a larger value, such as 4000 px, then each click back or on the next page button, calculate the number of pages, if has come to the last page, then return to the first page, scrolling is implemented by controlling the left property of div, need two div, the position of the outside div set as retative, the position of the div inside set as absolute.

The main code is as follows:

HTML:

<div id="product">
 <h2><span class="arrow">arrow</span> Product display </h2>
 <span class="prev"></span>
 <div id="content">
 <div id="content_list">
 <dl>
  <dt><img src="images/product1.jpg"/></dt>
  <dd> Data acquisition mobile terminal </dd>
 </dl>
 <dl>
  <dt><img src="images/product2.jpg"/></dt>
  <dd> Data acquisition mobile terminal </dd>
 </dl>
 <dl>
  <dt><img src="images/product3.jpg"/></dt>
  <dd> Data acquisition mobile terminal </dd>
 </dl>
 <dl>
  <dt><img src="images/product3.jpg"/></dt>
  <dd> Data acquisition mobile terminal </dd>
 </dl>
 <dl>
  <dt><img src="images/product1.jpg"/></dt>
  <dd> Data acquisition mobile terminal 1</dd>
 </dl>
 <dl>
  <dt><img src="images/product1.jpg"/></dt>
  <dd> Data acquisition mobile terminal 1</dd>
 </dl>
 <dl>
  <dt><img src="images/product1.jpg"/></dt>
  <dd> Data acquisition mobile terminal 1</dd>
 </dl>
 </div>
 </div>
 <span class="next"></span>
</div>

#product {
 width:720px;
 height:200px;
 border:1px solid #ccc;
 margin:0 5px 5px 0;
 float:left;
}
#product div#content {
 position:relative;
 width:690px;
 height:160px;
 display:inline-block;
 overflow:hidden;
 float:left;
}
#product div#content_list {
 position:absolute;
 width:4000px;
}
#product dl{
 width:160px;
 height:150px;
 float:left;
 margin:10px 4px;
 padding:2px 2px;
}
#product dl:hover {
 border:1px solid #333;
 background:#ccc;
}
#product dl dt {

}
#product dl dt img {
 width:160px;
 height:120px;
 border:none;
}
#product dl dd {
 text-align:center;
}
#product span.prev{
 cursor:pointer;
 display:inline-block;
 width:15px;
 height:150px;
 background:url(../images/arrow_l.gif) no-repeat left center;
 float:left;
}
#product span.next{
 cursor:pointer;
 display:inline-block;
 width:15px;
 height:150px;
 background:url(../images/arrow_r.gif) no-repeat left center;
 float:right;
}

$(function(){
    var page = 1;
    var i = 4; //There are 4 pictures in each sheet
    //The back button
    $("span.next").click(function(){    //Bind click event
   var content = $("div#content"); 
   var content_list = $("div#content_list");
   var v_width = content.width();
   var len = content.find("dl").length;
   var page_count = Math.ceil(len / i) ;   //As long as it is not an integer, take the smallest integer in the larger direction
   if( !content_list.is(":animated") ){    //Determine if the content display area is being animated
     if( page == page_count ){  //You're at the last page, and if you go back, you have to jump to the first page.
    content_list.animate({ left : '0px'}, "slow"); //Jump to the first page by changing the left value
    page = 1;
     }else{
    content_list.animate({ left : '-='+v_width }, "slow");  //Change the left value one page at a time
    page++;
    }
   }
   });
    //Forward button
    $("span.prev").click(function(){
      var content = $("div#content"); 
   var content_list = $("div#content_list");
   var v_width = content.width();
   var len = content.find("dl").length;
   var page_count = Math.ceil(len / i) ;   //As long as it is not an integer, take the smallest integer in the larger direction
   if(!content_list.is(":animated") ){    //Determine if the content display area is being animated
     if(page == 1 ){  //We are at the first page. If we go any further, we must jump to the last page.
     content_list.animate({ left : '-='+v_width*(page_count-1) }, "slow");
    page = page_count;
   }else{
    content_list.animate({ left : '+='+v_width }, "slow");
    page--;
   }
  }
    });
});