JQuery manually click to implement image carousel special effect _ jquery

This article mainly introduces jQuery manual click to implement image carousel special effects, and manual click on a digital card to implement image carousel, if you are interested in image carousel, you can refer to this article to write a carousel image trainer who first writes a carousel image that is manually clicked, then, I will gradually go into writing automatic carousel images and hover the mouse over images to stop moving the carousel images.
Next let's take a look at the final manual click carousel effect:

I. Principles

(1) The first is the carousel image architecture. I used a large p with the outermost side to wrap two small p S and put four pictures in one small p, put four numeric buttons in the other small p.

(2) set the width of the large p on the outermost side to the image width. If the width of the large p is exceeded, it must be hidden. However, set the width of the Small p on the image to 2000px, larger to facilitate left floating layout of four images

(3) When the number button is clicked, obtain the index value of the button to know the width of the Left shift of each image.

As shown in the figure above, the four images are floating and horizontal. When the number button is clicked, the image will be displayed in the parent frame according to the index value of the number button, because the image outside the parent frame will be hidden ~~~~~ If you still cannot understand the principle, I can only vomit blood ~~~~
Ii. Next let's look at the main program

   
   Slideshow ① (manually click slideshow)  
     
   
     
 
 
    
  
  
    
  
  
    
  
  
    
  
  
   
 
 
   
       
    
1 2 3 4