Native js and jquery implement image rotation fade-in and fade-out effect _ jquery

This article will share with you the code that uses native js and jQuery2 methods to implement the fade-in and fade-out effects of image carousel, which is very practical and convenient for comparison and analysis by our partners, I hope it will be helpful for you to learn about js and jq. There are many methods for image carousel. here we use the fade-in and fade-out form.

Both js native and jQuery can be implemented. because jquery encapsulates a lot of usage, it is much simpler to use and convert to js for use. In fact, js native is used to simulate these usage.

However, it is necessary to construct a basic presentation layer.

A simple image carousel generally consists of several parts.

For fade-in and fade-out

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. a transparent background layer is placed at the bottom of the image.

5. 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)

6. 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)

7. of course, sometimes there are still two arrows at both ends of the image <and> to indicate the direction of the image Carousel (this is not required first, if you want to use it as well)

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
      
 
 
    
  

The alt description of the image part is the information content of the infoList part. in some cases, you can bind it to the hidden directory. It should be noted that the width and height of the image in imgList are set immediately. if they are set in css, they will be slower.

I add the corresponding on class to the three active parts. in actual use, there may be no need for so many active

Next, set the css style for it.

Note:

1. banner is the image carousel range, which is set to 400 in width and 200 in height. this is also true for the ul peripheral of the image.

2. to display active items, set display: none for all li settings, and then add the on class settings display: inline.

3. when using the fadeIn () of jquery, it is changed to display: list-item. Therefore, overflow: hidden must be added to the banner. Otherwise, if the image is quickly switched, the overall image height exceeds the given height.

4. add the z-index value to each part to prevent overwrite failures.

Here, check whether the first item is correctly displayed on the page. If it is displayed, add the js processing part.

I. jQuery method

1. there is a label corresponding to the current image, curIndex = 0;

2. by default, automatic carousel is enabled.

Var autoChange = setInterval (function () {if (curIndex <$ (". imgList li "). length-1) {curIndex ++;} else {curIndex = 0;} // call the transformation processing function changeTo (curIndex) ;}, 2500 );

The default value is curIndex auto-increment, and then it is reset to 0.

3. change the changeTo () function

function changeTo(num){     $(".imgList").find("li").removeClass("imgOn").hide().eq(num).fadeIn().addClass("imgOn");    $(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");    $(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");  }

Let's take a look ..

4. when the mouse slides in and out of the lower-right corner

$ (". IndexList "). find ("li "). each (function (item) {$ (this ). hover (function () {clearInterval (autoChange); changeTo (item); curIndex = item ;}, function () {autoChange = setInterval (function () {if (curIndex <$ (". imgList li "). length-1) {curIndex ++;} else {curIndex = 0;} // call the transformation processing function changeTo (curIndex) ;}, 2500 );});});

Slide into the cleanup timer and perform image switching. Set curIndex to the current item (do not forget)

Slide out to reset the timer and restore the default status

In this way, fade in and fade out.

Complete Code

 Image carousel jq (fade in and out)  

      

        
 
 

          
  
  
      
  
  
      
  
  
      
  
  
      
  
  
      
 
 
      
 
       
 
 

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

          
  
  
1
        
  
  
2
        
  
  
3
        
  
  
4
        
  
  
5