JS rotation chart (Netease cloud rotation chart)

If you are little white , This set of information can help you become a big bull , If you have rich development experience , This set of information can help you break through the bottleneck
2022web Full set of video tutorial front-end architecture H5 vue node Applet video + Information + Code + Interview questions .

JS Shuffling figure

Write it at the front

The smartest person is the one who is least willing to waste time .—— Dante

Realization function

• Picture auto switch
• Move the mouse in to stop automatic playback , Display button
• Click button , Turn back and forth
• Move the mouse into the small circle , You can jump to the corresponding picture
• Click part of the picture on the left and right sides to turn back and forth

Realization principle

• Fold the pictures together , Move out one picture on each side , The other pictures are stacked just below the middle picture
• By changing the class name of the left, middle and right pictures , To achieve the effect of switching pictures

Suppose I want to play the next picture , Just give the class name of the light green picture to the green picture , So the green picture can go to the light green position , Similarly, give the class name of the green picture to yellow , Give the yellow class name to the next one

Realization effect

Due to the size limit of the uploaded picture , Only a short section was cut

Explanation of several important functions

• Page turning function

  var j = 1;
  var num = [‘one’,‘two’,‘three’,‘four’,‘five’,‘six’];
  rightb.addEventListener(‘click’,rightf);
  function rightf(){
  // Add the last of the array to the first
  num.unshift(num[5]);
  // Delete the last one
  num.pop();
  // Back to the li Add class name
  for(var i = 0;i < num.length;i++){
  imgt[i].setAttribute(‘class’,num[i]);
  }
  // Use this global variable to change the color of the small circle
  j++;
  colort();
  }
  function colort (){
  for(var i = 0 ; i < list.children.length ; i++){
  list.children[i].className = ‘’;
  }
  if(j >= 6){
  j = 0;
  }else if (j < 0 ){
  j = 5;
  }
  list.children[j].className = ‘change’;
  }

The idea of turning pages left and right is the same , Take one for example

We first define a global variable 'j’ To control the movement of the small circle at the same time

hold 6 The class names of the pictures are stored in the array , This can be done by modifying the array , To modify the class name corresponding to the image , When you move left, the picture on the right becomes the middle , Middle picture to left , The fourth picture to the right

This can be achieved through the changes in the figure below , Put the last class name in the first one , That is, first copy the last element of the array to the front , Delete the last element , So the array changes successfully , Then assign this array to the pictures in turn , In this way, the picture switching effect is completed

Simple ideas

An array is [1,2,3,4,5,6]

The value is 2 The corresponding style of is the middle picture

The value is 1 The style of is the picture on the left

The value is 3 The style of is the picture on the right

And now we're going to move left , The array becomes [6,1,2,3,4,5]

So the picture in the middle becomes the next one , The others also change accordingly

Small circle

Global variables j To record the current number of pictures , And then put the j Just change the style with a small circle

The idea of exclusivity is applied here , First remove all the small circles from the pattern , Then add a style to a specific circle

Switch the corresponding picture through the small circle

    function jump(){
        // What is the index number of the small circle the mouse passes through 
        var index = this.getAttribute('index');
        // Determine where the current middle picture is , What is the index number 
        var now = num.indexOf('two');
        // Calculate the distance between the passing point and the current point , The difference between the two index numbers 
        var dif = Math.max(index,now) - Math.min(index,now);
        /*  If the passed small circle index number is larger than the current index number , It is equivalent to clicking the right button , How much difference , It's equivalent to several times */
        if(index > now){
            while(dif--){
                rightf();
            }
        }else {
            while(dif--){
                leftf();
            }
        }
    }

Comments super detailed

Complete code

HTML part

<!DOCTYPE html>
<html lang="chn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="wyy.css">
    <script src="wyy.js"></script>
</head>
<body>
    <!--  Big box  -->
    <div class="box">
        <!--  Left button  -->
        <a href="javascript:;" class="left">&lt</a>
        <!--  Right button  -->
        <a href="javascript:;" class="right">&gt</a>
        <!--  Rotate pictures  -->
        <ul class="imgs" > 
            <li class="one">
                <a href="#"><img src="wyyimg/1.jpg" alt=""></a>
            </li>
            <li class="two">
                <a href="#" ><img src="wyyimg/2.jpg" alt=""></a>
            </li>
            <li class="three">
                <a href="#"><img src="wyyimg/3.jpg" alt=""></a>
            </li>
            <li class="four">
                <a href="#"><img src="wyyimg/4.jpg" alt="" class="rose"></a>
            </li>
            <li class="five">
                <a href="#"><img src="wyyimg/5.jpg" alt=""></a>
            </li>
            <li class="six">
                <a href="#"><img src="wyyimg/6.jpg" alt=""></a>
            </li>
        </ul>
// Small circle 
        <ul class="list">
        </ul>
// Two empty boxes , Achieve the left and right picture click effect 
        <div class="rights"></div>
        <div class="lefts"></div>
    </div>
</body>
</html>

CSS part

/*  Some simple initialization files  */
* {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
}
li {
    list-style-type: none;
}
/*  Change the size of the picture  */
img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
}
/*  Determine the size of the box  */
.box {
    position: relative;
    width: 958px;
    height: 284px;
    /*  In the middle  */
    top: 0;
    left: 50%;
    transform: translate(-50%,50%);
} 
.imgs {
    position: absolute;
    width: 730px;
    height: 284px;
    top: 0;
    left: 50%;
    transform: translate(-50%,0%);
}
/*  Make the pictures all stacked together  */
.imgs li {
    position: absolute;
    width: 730px;
    transition: 0.5s;
}
/*  Style the left and right buttons , And positioning  */
.box .left {
    position: absolute;
    font-size: 24px;
    color: white;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background-color: black;
    border-radius: 18px;
    /*  Add translucency  */
    opacity: .3;
    top: 50%;
    left: 0;
    z-index: 999;
}
.box .right {
    position: absolute;
    font-size: 24px;
    color: white;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background-color: black;
    border-radius: 18px;
    /*  Add translucency  */
    opacity: .3;
    top: 50%;
    right: 0;
    z-index: 999;
}
/*  Add a mouse in style to the left and right buttons  */
.left:hover {
    /*  Make it a little more transparent , Make the buttons look brighter  */
    opacity: .7;
}
.right:hover {
    opacity: .7;
}
/*  Stagger the pictures  */
.imgs .one {
    transform: translateX(-150px) scale(0.9);
    z-index: 1;
}
/*  The second picture is in the middle , Highest level  */
.imgs .two {
    z-index: 2;
}
.imgs .three {
    transform: translateX(150px) scale(0.9);
    z-index: 1;
}
/*  The pictures that are not displayed at the beginning are placed under the middle picture  */
.imgs .four {
    transform: scale(0.9);
}
.imgs .five {
    transform: scale(0.9);
}
.imgs .six {
    transform: scale(0.9);
}
/*  Design small circles  */
/*  location  */
.list {
    position: absolute;
    bottom: -25px;
    left: 50%;
    margin-left: -81px ;
    z-index: 777;
}
/*  Design style  */
.list li {
    float: left;
    width: 15px;
    height: 15px;
    background-color: rgb(230, 230, 230);
    border-radius: 50%;
    margin: 0 6px;
    cursor: pointer; 
}
/*  The changed style of the small circle  */
.list .change {
    background-color: rgb(236, 65, 65);
}
/*  One box on each side  */
.rights{
    position: absolute;
    right: 0;
    bottom: 30px;
    height: 255.5px;
    width: 100px;
}
.lefts{
    position: absolute;
    left: 0;
    bottom: 14px;
    height: 255.5px;
    width: 100px;
}

JS part

window.addEventListener('load',function(){
    // Get elements 
    var leftb = document.querySelector('.left');
    var rightb = document.querySelector('.right');
    var box = document.querySelector('.box');
    var imgs = box.querySelector('.imgs');   
    var imgt = imgs.querySelectorAll('li');
    // Auto page turning function 
    var timeone = setInterval(function(){
        rightf();
    },1000);
    // The left and right buttons appear 
    box.addEventListener('mouseover',function(){
        leftb.style.display = 'block';
        rightb.style.display = 'block';
        // Clear timer on move in 
        clearInterval(timeone);
        timeone = null;       
    })
    
    // The left and right buttons disappear 
    box.addEventListener('mouseout',function(){
            leftb.style.display = 'none';
            rightb.style.display = 'none';
            // Resume timer 
            clearInterval(timeone);
            timeone = setInterval(function(){
            rightf();
        },1000)
        })
    // Dynamic generation of small circles , Small circle module 
    var list = box.querySelector('.list');
    for(var i = 0;i < imgs.children.length;i++){
        // establish li, Join in ul in 
        var li =document.createElement('li');
        list.appendChild(li);
        // Add the class name to the small circle 
        li.setAttribute('index',i);
        // Exclusive thoughts , Click on the small circle , Color change 
        li.addEventListener('click',colors);
        // Through the small circle , Switch pictures 
        li.addEventListener('mouseenter',jump);
    }
    // The second light at the beginning 
    list.children[1].className = 'change';
    // Discoloration function  
    function colors(){
        // Turn all the small circles white 
        for(var i = 0 ; i < list.children.length ; i++){
            list.children[i].className = '';
        }
        // Color the small circle corresponding to the picture 
        var index = this.getAttribute('index');
        list.children[index].className = 'change';
    } 
    // Jump function 
    function jump(){
        var index = this.getAttribute('index');
        var now = num.indexOf('two');
        // Calculate the distance between the passing point and the current point 
        var dif = Math.max(index,now) - Math.min(index,now);
        // console.log(dis);
        if(index > now){
            while(dif--){
                rightf();
            }
        }else {
            while(dif--){
                leftf();
            }
        }
    }
     // The small circle moves with the picture 
    var j = 1;
    function colort (){
        for(var i = 0 ; i < list.children.length ; i++){
            list.children[i].className = '';
        }
        if(j >= 6){
            j = 0;
        }else if (j < 0 ){
            j = 5;
        }
        list.children[j].className = 'change';
    }
     // Page turning module 
     var num = ['one','two','three','four','five','six'];
     // Turn right 
        rightb.addEventListener('click',rightf);
        function rightf(){
            // Add the last of the array to the first 
            num.unshift(num[5]);
            // Delete the last one 
            num.pop();
            // Back to the li Add class name 
            for(var i = 0;i < num.length;i++){
                imgt[i].setAttribute('class',num[i]);
            }
            // Use this global variable to change the color of the small circle 
            j++;
            colort();
        }
    // Page left 
        leftb.addEventListener('click',leftf)
        function leftf(){
            num.push(num[0]);
            num.shift();
            for(var i = 0;i < num.length;i++){
                imgt[i].setAttribute('class',num[i]);
            }
            j--;
            colort();
        }
    // Click the picture to turn the page , I did this by adding a box on the left and right sides 
        var rights = document.querySelector('.rights');
        rights.addEventListener('click',function(){
            rightf();
        })
        var lefts = document.querySelector('.lefts');
        lefts.addEventListener('click',function(){
            leftf();
        })
})

At the end of the

The above is all the code and explanation of Netease cloud rotation chart

If there is anything missing or wrong , Welcome to point out .

You can leave a message if you need a code file

Time , Like the water in sponge , As long as willing to squeeze , There is always something .——[ Lu xun ]

---