Implement horizontal scrolling of images by clicking the left and right buttons based on jquery_jquery

Click the left and right buttons to scroll the image horizontally with jquery, scrolling four at a time. After the image scrolling is completed, it will automatically return to the first page:
The effect picture is as follows:

Copy code The code is as follows:

< ;script type="text/javascript">
$(function(){
var page= 1;
var i = 4;//Four pictures per page
//To the right Scroll
$(".next").click(function(){ //Click event
var v_wrap = $(this).parents(".scroll"); // Obtained based on the currently clicked element Parent element
var v_show = v_wrap.find(".scroll_list"); //Find the area where the video is displayed
var v_cont = v_wrap.find(".box"); //Find the peripheral area of ​​the video display area
var v_width = v_cont.width();
var len = v_show.find("li").length; //The number of my video pictures
var page_count = Math.ceil(len/i ); //As long as it is not an integer, take the smallest integer in the larger direction
if(!v_show.is(":animated")){
if(page == page_count){
v_show. animate({left:'0px'},"slow");
page =1;
}else{
v_show.animate({left:'-=' v_width},"slow");
page ;
}
}
});
//Scroll left
$(".prev").click(function(){ //Click event
var v_wrap = $(this).parents(".scroll"); //Get the parent element based on the currently clicked element
var v_show = v_wrap.find(".scroll_list"); //Find the video display Area
var v_cont = v_wrap.find(".box"); //Find the peripheral area of ​​the video display area
var v_width = v_cont.width();
var len = v_show.find("li ").length; //The number of my video pictures
var page_count = Math.ceil(len/i); //As long as it is not an integer, take the smallest integer in the larger direction
if(!v_show .is(":animated")){
if(page == 1){
v_show.animate({left:'-=' v_width*(page_count-1)},"slow");
page =page_count;
}else{
v_show.animate({left:' =' v_width},"slow");
page--;
}
}
});
});




< ;div class="scroll" style="margin:0 auto;width:550px;">

< li>1

• 2


• 3


• 4


• 5


• 6


• 7


• 8


• 9< /li>
  
• 10


• 11


• 12


• 13
• 14


• 15


• 16
/div>