jQuery implementation code for sliding left and right of a group of pictures after clicking on them_jquery

Copy code The code is as follows:

$(function () {
var page = 1;/ /Initialize page variable
var i = 2;//Place two sets of pictures in each page
var $pictureShow = $(".pictures4");
var downwidth = $pictureShow.width();// Get the width of the frame content, that is, the size of each move
var len = $(".picturescontent4").find('ul').length;//Find how many groups of pictures there are in total
var page_number = Math .ceil(len / i);//Find how many layouts there are in total
$("#symbol4b").click(function () {
if (!$(".picturescontent4").is(" :animated")) {//Determine whether the animation effect is being executed
if (page == page_number) {//We have reached the last page. If we go back, we must jump to the first page.
$(".picturescontent4").animate({ left: '0px' }, "slow");//Jump to the first page by changing the left value
page = 1;
} else {
$(".picturescontent4").animate({ left: '-=' downwidth }, "slow");//By changing the left value, one page can be changed each time
page;
}
}
return false;
});
$("#symbol4a").click(function () {
if (!$(".picturescontent4").is( ":animated")) {
if (page == 1) {//We have reached the first page. If we go forward, we must jump to the last page
$(".picturescontent4") .animate({ left: '-=' downwidth * (page_number - 1) }, "slow");//Jump to the last page by changing the left value
page = page_number;
} else {
$(".picturescontent4").animate({ left: ' =' downwidth }, "slow");//By changing the left value, one page can be changed each time
page--;
}
}
return false;
});
});

Copy code The code is as follows:

• 
  
  


• 
  
  

< ;/ul>



• 
  < img class="picture" src="i/Picture14.png" alt="Picture14"/>
  


• 






• 
  
  
• 
  
  






• 
  
  


• 
  
  






• 
  
  


• 
  
  






• 
  
  


• 
  < ;/a>
  

Copy code The code is as follows:

.pictures2ul1,.pictures2ul2,.pictures2ul3,.pictures2ul4, .pictures2ul5,.pictures2ul6
{
margin-top:0px;
margin-right:17px;
padding:0px;
width: 122px;
float:left;
list-style-type:none;}
.pictures4
{
height:111px;
position:absolute;
overflow:hidden;
width:278px;
}
.picturescontent4 //After setting the position, you can use left control in JavaScript.
{
position:absolute;
float:left;
width:834px;
}