Implementation Code for sliding left and right of a group of images after clicking jQuery _ jquery-js tutorial

It is mainly used for image display. You need to click the next group of images to slide between the left and right. For more information, see The Code is as follows:

$ (Function (){
Var page = 1; // initialize the page variable
Var I = 2; // two sets of images are displayed for each version.
Var $ pictureShow = $ (". pictures4 ");
Var downwidth = $ pictureShow. width (); // obtain the width of the frame content, that is, the size of each move
Var len = $ (". picturescontent4"). find ('ul '). length; // you can find several groups of images.
Var page_number = Math. ceil (len/I); // find the total number of la S.
$ ("# Symbol4b"). click (function (){
If (! $ (". Picturescontent4"). is (": animated") {// determines whether the animation effect is being executed
If (page = page_number) {// you have reached the last page. if you are back, you must jump to the first page.
$ (". Picturescontent4"). animate ({left: '0px '}, "slow"); // you can jump to the first page by changing the left value.
Page = 1;
} Else {
$ (". Picturescontent4"). animate ({left: '-=' + downwidth}, "slow"); // you can change the left value to a new layout.
Page ++;
}
}
Return false;
});
$ ("# Symbol4a"). click (function (){
If (! $ (". Picturescontent4"). is (": animated ")){
If (page = 1) {// it has reached the first layout. if you move forward, you must jump to the last layout.
$ (". Picturescontent4 "). animate ({left: '-=' + downwidth * (page_number-1)}, "slow"); // jump to the last layout by changing the left Value
Page = page_number;
} Else {
$ (". Picturescontent4"). animate ({left: '+ =' + downwidth}, "slow"); // you can change the left value to change the layout.
Page --;
}
}
Return false;
});
});

The Code is as follows:

• 
  
  


• 
  
  

• 
  
  


• 
  
  

• 
  
  


• 
  
  

• 
  
  


• 
  
  

• 
  
  


• 
  
  

• 
  
  


• 
  
  

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 // you can use left to control the position in JavaScript.
{
Position: absolute;
Float: left;
Width: 834px;
}