js to achieve image fade-in and fade-out effect

js to achieve image fade-in and fade-out effect

This article shares the specific code of js to achieve image fade in and out for your reference. The specific content is as follows

Analysis process:

1. Add multiple images to the largest parent element and set the transparency of the first image to 1 opacity: 1

The transparency of the remaining images is 0;
Set a row of dots below the picture

2. Get each picture and dynamically set different levels, with the level size set from 4 to 0 in sequence;

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 image to appear, clockwise or counterclockwise; when the image changes, the corresponding dots also change. The image that appears has the highest level and a transparency of 1, while the transparency of the remaining images is 0, and the color of the corresponding small dots turns 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++; //The 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 dot changes 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 to make the color of the first dot pink. When the mouse slides into the largest parent element, the image stops rotating. When the mouse slides into the small dot, it is divided into two situations: entering from the left and right of the current dot.

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; //The 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 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); //get the absolute value var le1=that.Crclelist.length-ri1;
                    if(ri1<=le1){
                        console.log("left", ri1);
                        that.Animatezindex("s",ri1);
                    }
                    if(ri1>le1){
                        console.log("right", le1);
                        that.Animatezindex("n",le1);
                    }

                }
            }
        }
    }

5. Set the rotation event to change the rotation of the image according to the time.

Timelines:function(){
        var nowtime = new Date().getTime();
        if((nowtime - glider.Oldtime) >= glider.TimeDely ){
            glider.Oldtime =nowtime;
            glider.Animatezindex ("n",1); //Change to the right}
        //You can use the setTimeout and setInterval methods to implement animation in the script.
        // But this may not be smooth enough and will take up extra resources.
        //The requestAnimationFrame method is used to notify the browser to resample the animation and play it in a loop.
        /*cancelAnimationFrame
        The cancelAnimationFrame method is used to cancel a previously scheduled animation frame update request. */
       glider.Timeset = window.requestAnimationFrame(glider.Timelines);
 }

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Native js and jquery to achieve the fade-in and fade-out effect of image carousel
  • How to achieve fade-in and fade-out effect in js
  • Native js implements fadein and fadeout effects
  • js to achieve simple image fade-in and fade-out switching effect
  • js fade in and out picture carousel effect code sharing
  • js control fade in and fade out sample code
  • A simple method to implement delayed loading and fade-in and fade-out effects of images using JS
  • js realizes the fade-in and fade-out effect of image loading
  • js to achieve fade in and fade out carousel switching function
  • js motion framework_including fade-in and fade-out effects of pictures

<<:  Let's talk about the difference between MyISAM and InnoDB

>>:  Implementation of multiple instances of tomcat on a single machine

Recommend

Hbase Getting Started

1. HBase Overview 1.1 What is HBase HBase is a No...

Database query optimization: subquery optimization

1. Case Take all employees who are not the head o...

mysql 5.7.18 winx64 free installation configuration method

1. Download 2. Decompression 3. Add the path envi...

Simple steps to create a MySQL container with Docker

Preface We have already installed Docker and have...

WeChat applet development chapter: pitfall record

Recently, I participated in the development of th...

Detailed explanation of Mencached cache configuration based on Nginx

Introduction Memcached is a distributed caching s...

HTML multimedia application: inserting flash animation and music into web pages

1. Application of multimedia in HTML_falsh animat...

Understanding and example code of Vue default slot

Table of contents What is a slot Understanding of...

5 issues you should pay attention to when making a web page

1. Color matching problem <br />A web page s...

Implementation of Mysql User Rights Management

1. Introduction to MySQL permissions There are 4 ...

hr horizontal line style example code

Copy code The code is as follows: <hr style=&q...

How to set Nginx log printing post request parameters

【Foreword】 The SMS function of our project is to ...

Detailed explanation of software configuration using docker-compose in linux

Preface This article will share some docker-compo...

Two ways to specify the character set of the html page

1. Two ways to specify the character set of the h...