Use jQuery to simply implement the left and right scrolling function of product display pictures (sample code)_jquery

I recently made a product display function. Since there are so many products that can’t be displayed on one screen, I wanted to create an effect of turning pages by clicking on them. I found a few online but they didn’t work very well, so I ended up having to I wrote it myself.

The effect is as follows:



The principle is relatively simple: The area to be scrolled The override of the CSS is set to hidden, and the width is set to a relatively large value, such as 4000px. Then each time the previous or next page button is clicked, the current page number is calculated. If the last page has been reached, return On the first page, scrolling is achieved by controlling the left attribute of the div, which requires two divs. The position of the outer div is set to retative, and the position of the inner DIV is set to absolute.

The main code is as follows:

HTML:

Copy code The code is as follows:

arrowProduct display

Data collection mobile terminal

< img src="images/product2.jpg"/>

Data collection mobile terminal

Data collection mobile terminal

Data collection mobile terminal

Data Collect mobile terminal 1

Data collection mobile terminal 1

Data collection mobile terminal 1

CSS:

Copy the code The code is as follows:

#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

Copy code The code is as follows:

$(function(){
var page = 1;
var i = 4; //Place 4 pictures in each page
//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, go to Take the smallest integer in the large direction
if( !content_list.is(":animated") ){ //Determine whether the "content display area" is being animated
if( page == page_count ){ // Already We have reached the last page. If we go back, we must jump to the first page.
content_list.animate({ left : '0px'}, "slow"); //Jump to the first page by changing the left value. The first page
page = 1;
}else{
content_list.animate({ left : '-=' v_width }, "slow"); // By changing the left value, each change is achieved A layout
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 whether the "content display area" is in animation
if(page == 1){ //We have reached the first page. If we go forward, 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--;
}
}
});
});