Use jquery to simply implement the picture left and right scrolling function of product display

Today to do a product display function, because the product is more, a screen display is not finished, so want to do a click on the effect of the page, in the Internet to find a few are not easy to use, finally can only write their own hands.

The effect is as follows:

The principle is simple: the CSS of the area to be scrolled is set to hidden, the width is set to a relatively large value, such as 4000px, and then each time you click on the previous page or the next page of the button, calculate the current number of pages, if it has reached the last page, then go back to the first page, Scrolling is achieved by controlling the left property of the Div, requires two Div, the position of the outside Div is set to retative, and the div inside the position is set to absolute.

The main code is as follows:

Html:

<div id= "Product" > class= "Arrow" >arrow</span> products class= "Prev" ></span> <div id= "Content" > <div id= "content_list" > <dl> <dt><i MG src= "images/product1.jpg"/></dt> <dd> Data Acquisition Mobile Terminal </dd> </dl> <dl> <        Dt></dt> <dd> Data Acquisition Mobile terminal </dd> </dl> <dl>    <dt></dt> <dd> Data Acquisition Mobile Terminal </dd> </dl> <dl> <dt></dt> <dd> Data Acquisition Mobile Terminal </dd> < /dl> <dl> <dt></dt> <dd> Data acquisition Mobile Terminal 1&LT;/DD > </dl> <dl> <dt></dt> <dd> Data acquisition Mobile Terminal 1</dd> </dl> <dl> <dt></dt> &L T;dd> Data Acquisition Mobile Terminal 1&LT;/DD> </dl> </div> </div> <span  class= "Next" ></span></div>

Css:

#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;}

JS Code

$ (function () {var page= 1; var i= 4;//put 4 pictures per edition//Back button$ ("Span.next"). Click (function () {//Bind Click eventvar 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);//take the smallest integer in a large direction as long as it is not an integer         if(!content_list.is (": Animated")) {//determine if the content display area is being animated              if(page = = Page_count) {//already to the last page, if back again, you must jump to the first layout. Content_list.animate ({left: ' 0px '}, "slow");//jump to the first layout by changing the left valuepage = 1; }Else{content_list.animate ({left:'-= ' +v_width}, "slow");//change the left value to a different layout each timepage++;    }         }   }); //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);//take the smallest integer in a large direction as long as it is not an integer         if(!content_list.is (": Animated")) {//determine if the content display area is being animated              if(page = = 1) {//already to the first page, if you move forward, you 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--; }        }    });});

Use jquery to simply implement the picture left and right scrolling function of product display