js realizes picture fade in and fade out effect

In this paper, we share the specific code of js to realize the fade-in and fade-out of pictures for your reference. The specific contents are as follows

Analysis process:

1. Add multiple pictures to the largest parent element, so that the transparency of the first picture is 1 opacity: 1

The transparency of other pictures is 0;
Set 1 row of dots below the picture

2. Get each picture, dynamically set different levels, and set the level sizes from 4 to 0 in turn;

Setz_index:function(){
        for(var i=0;i<this.Photo.length;i++ ){
            index=i;
            this.Photo[i].style.zIndex =this.Photo.length-i-1;
        }
    },

3. Set two ways for the picture to appear, clockwise or counterclockwise; When the picture changes, the corresponding dots also change. The picture appears at the highest level, with transparency of 1, and the rest of the pictures have transparency of 0, and the corresponding dot color changes to pink.

Animatezindex:function(math,count){
       for(var i=0;i<count;i++){
         for(var k=0;k<this.Photo.length;k++) {
            //console.log(1);
           var index=parseInt (this.Photo[k].style.zIndex );  //43210  04321 10432
           if(math=="n"){
             index++;    // Dots change color from left to right 
             if(index ==this.Photo.length){
                 index=0;
                 this.Photo[k].style.opacity =0;
                 this.Crclelist [k].style.background ="#fff";
             }
             if(index==this.Photo.length-1){
                 this.Photo [k].style.opacity= 1;
                 this.Crclelist [k].style.background ="pink";
                 this.Savecolor= this.Crclelist [k];

             }
           }
             else{
               index--;   // The dots change color from right to left 
               if(index==-1){
                   index=this.Photo.length-1;
               }
               if(index==this.Photo.length-1){
                   this.Photo [k].style.opacity= 1;
                   this.Crclelist [k].style.background ="pink";
                   this.Savecolor= this.Crclelist [k];
               }
               if(index==this.Photo.length-2){
                   this.Photo[k].style.opacity =0;
                   this.Crclelist [k].style.background ="#fff";
               }
           }
             this.Photo[k].style.zIndex =index;
         }
       }
    },

4. Set the default value, so that the color of the first dot is pink. When the mouse slides into the largest parent element, the picture stops rotating; When the mouse slides into a small dot, it is divided into two situations, entering from the left side of the current dot and entering from the right side.

Moren_set:function(){
        var that=this;
        that.Crclelist [0].style.background ="pink";
        that.Savecolor =that.Crclelist[0];
        that.Bigblock.onmouseenter=function(){
            //  console.log(1);
            window.cancelAnimationFrame ( glider.Timeset);
        };
        that.Bigblock.onmouseleave=function(){
            glider.Timelines();
        }
        // Point events, follow the picture changes 
        for(var i=0;i<that.Crclelist.length;i++){
            that.Crclelist[i].index=i;
            that.Crclelist[i].onmouseenter =function(){
              var oldindex=that.Savecolor.index;
              var newindex=this.index;  // Index of the dot that the mouse slides into  this Refers to the sliding event of the current dot 
 //               console.log(newindex);
                if(newindex -oldindex >0) {   // Enter from the right side of the current dot 
                  var ri=newindex -oldindex;
                  //  console.log(ri);
                    var le= that.Crclelist.length-ri;
                   // console.log(le);
                    if(ri<=le){
                        console.log(" To the right ",ri);
                        that.Animatezindex("n",ri);
                    }
                    if(ri>le){
                        console.log(" To the left ",le);
                        that.Animatezindex("s",le);
                    }
                }
                else if(newindex -oldindex<0){
                    var ri1=Math.abs(newindex-oldindex)   ; // Take an absolute value 
                    var le1=that.Crclelist.length-ri1;
                    if(ri1<=le1){
                        console.log(" To the left ", ri1);
                        that.Animatezindex("s",ri1);
                    }
                    if(ri1>le1){
                        console.log(" To the right ", le1);
                        that.Animatezindex("n",le1);
                    }

                }
            }
        }
    }

5. Set the rotation event and change the rotation of the control picture according to the time.

Timelines:function(){
        var nowtime=new Date().getTime ();
        if((nowtime -glider.Oldtime) >=glider.TimeDely ){
            glider.Oldtime =nowtime;
            glider.Animatezindex ("n",1);  // Toward   Right change 
        }
        // It can be passed through setTimeout And setInterval Method to implement animation in the script, 
        //  However, this effect may not be smooth enough and will take up extra resources. 
        //requestAnimationFrame Method is used to notify the browser to resample the animation , Play it in a loop. 
        /*cancelAnimationFrame
        cancelAnimationFrame  Method is used to cancel the previously scheduled 1 Request for animation frame update. */
       glider.Timeset =window.requestAnimationFrame(glider.Timelines);
 }