Native js and jquery implement image carousel special effect _ jquery

This article will share with you how to implement the same image carousel effects using the native JS and JQ methods, which is very practical and convenient for you to compare and learn about native js and jQuery, if you have any need, refer.

(1) The first part is the structure of the page.

For the left-right switch mode

1. First, it is a peripheral part (in fact, it is the overall wrapper of the outermost side)

2. the next step is where you set the image Carousel (that is, a banner)

3. then there is an image Group (you can use the new p or ul --> li format)

4. then the left arrow and right arrow at both ends of the image
5. a transparent background layer is placed at the bottom of the image.

6. then there is an image description info layer, which is placed in the lower left corner of the transparent background layer (p or ul --> li)

7. then there is a button layer to locate the index of the image Group and place it in the lower right corner of the transparent background layer (p or ul --> li)

As a result, the html structure can be constructed first.

      

        
 
 

        
  
  
      
  
  
      
  
  
      
  
  
      
  
  
      
 
 
                  
 
       
 
 

          
  
  
Puss in boots1
        
  
  
Puss in boots2
        
  
  
Puss in boots3
        
  
  
Puss in boots4
        
  
  
Puss in boots5
      
 
 
      
 
 

          
  
  
1
        
  
  
2
        
  
  
3
        
  
  
4
        
  
  
5
      
 
 
    
  

Compared with the previous knowledge, two arrows are added to the img label.

(2) the CSS style section (Image Group processing) is different from the fade-in and fade-out section.

To fade in and out, you only need to show or hide the image with the corresponding serial number. you can directly set it through display.

The left-right switching mode uses the image li floating. The total ul width of the parent layer element is the total image width, and the left-right switching mode is set to the limited banner width to hide the part that exceeds the width.

Then, when you want to switch to an image with a serial number, use its ul positioning left style to set the corresponding attribute value.

For example, if the first image is displayed and left is set to 0 px at the beginning, left:-400px is required for the second image to be displayed.

(3) The page has been built for a long time and JavaScript processing can be performed.

I. jQuery method

Let's talk about jq as usual.

1. global variables

Var curIndex = 0, // Current index imgLen = $ (". imgList li"). length; // total number of images

2. automatic switch timer processing

// The timer automatically changes 2.5 seconds each time var autoChange = setInterval (function () {if (curIndex 

3. Add Event Processing for the left and right arrows
Left Arrow


// The Left arrow slides in and out Event Processing $ ("# prev "). hover (function () {// slip in to clear the timer clearInterval (autoChange) ;}, function () {// slip out to reset the timer autoChangeAgain ();}); // click the left arrow to process $ ("# prev "). click (function () {// process the last image based on curIndex. curIndex = (curIndex> 0 )? (-- CurIndex): (imgLen-1); changeTo (curIndex );});

Right Arrow


// The right arrow slides in and out Event Processing $ ("# next "). hover (function () {// slip in to clear the timer clearInterval (autoChange) ;}, function () {// slip out to reset the timer autoChangeAgain ();}); // click the right arrow to process $ ("# next "). click (function () {curIndex = (curIndex 

AutoChangeAgain () is a reset timer function.


// Clear the reset timer when the timer -- encapsulate function autoChangeAgain () {autoChange = setInterval (function () {if (curIndex 

ChangeTo () is a processing function for image switching.


function changeTo(num){     var goLeft = num * 400;    $(".imgList").animate({left: "-" + goLeft + "px"},500);    $(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");    $(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");  }

GoLeft
4. bind events to the li buttons in the lower right corner.


// Bind events to the button index in the lower right corner. $ (". indexList "). find ("li "). each (function (item) {$ (this ). hover (function () {clearInterval (autoChange); changeTo (item); curIndex = item ;}, function () {autoChangeAgain ();});});

Jq is so simple that there is a lot of native code.
Complete Code


 Image carousel jq (left-right switchover)  

      

        
 
    

          
  
     
      
  
     
      
  
     
      
  
     
      
  
     
      
 
    
                  
 
       
 
    

          
  
     
Puss in boots1
        
  
     
Puss in boots2
        
  
     
Puss in boots3
        
  
     
Puss in boots4
        
  
     
Puss in boots5
      
 
    
      
 
    

          
  
     
1
        
  
     
2
        
  
     
3
        
  
     
4
        
  
     
5