Detailed explanation of javascript native js rotation diagram

<div class="banner_img fr" id="banner">
        <!-- picture -->
        <ul class="ui-sortable publish-slider" id="publish-copy">
          <li class="on" style="display:block;z-index:1;">
            <img src="./images/banner1.jpg" class="" />
          </li>
          <li>
            <img src="./images/banner3.jpg" class="" />
          </li>
          <li>
            <img src="./images/banner5.jpg" class="" />
          </li>
          <li>
            <img src="./images/banner6.jpg" class="" />
          </li>
        </ul>
        <!-- DoT -->
        <div class="b_dot" id="b_dot">
          <!-- <a href="javascript:void(0);" class="on"></a>
          <a href="javascript:void(0);" class=""></a>
          <a href="javascript:void(0);" class=""></a>
          <a href="javascript:void(0);" class=""></a> -->
        </div>
        <!--Left and right buttons  -->
        <div class="banner_btn">
          <!-- Left button -->
          <a href="javascript:;" class="btn_le">
            &lt;
          </a>
          <a href="javascript:;" class="btn_ri">
            &gt;
          </a>
        </div>

        
      </div>

html structure and css settings of left and right button styles:

.banner_btn {
   display: none;
 }
 .btn_le,
 .btn_ri {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 30px;
   height: 50px;
   background-color: rgba(0,0,0,.3);
   color: #fff;
   font-size: 25px;
   text-align: center;
   line-height: 46px;
 }
 .btn_le {
   left: 0;
   border-top-right-radius: 100px;
   border-bottom-right-radius: 100px;
 }
 .btn_ri {
   right: 205px;
   border-top-left-radius: 100px;
   border-bottom-left-radius: 100px;
 }

Problem: the arrow cannot be centered

1.2 left and right buttons display and hide

The mouse passes through the left and right buttons, and the mouse leaves the button to hide

// 1. Get element
var banner_img = document.querySelector('.banner_img');
var banner_btn = banner_img.querySelector('.banner_btn');
var publish_slider = banner_img.querySelector('.publish-slider');

// 2. The mouse passes through the button to show and hide
publish_slider.addEventListener('mouseenter', function () {
    banner_btn.style.display = 'block';
})
publish_slider.addEventListener('mouseleave', function () {
    banner_btn.style.display = 'none';
})

The rest of the css parts can be tuned by themselves

1.3 small circle dynamic setting click add class name click picture move

Writing method 1: traverse small a, and then use the for loop to add the class name using classList

2.1 a. setAttribute ('index ', I); add an index to a's lifetime achievements, and remember to quote the index

2.2 a.href = 'javascript:;'; remember to add attributes, otherwise you can't click

2.3 var index = this.getAttribute('index');** num = index; * * get the index number only when you click the small circle -- this is to prepare for the subsequent click button to move

var b_dot = document.querySelector('.b_dot');
// If there are several small li in ul, several small a will be generated
console.log(publish_slider.children.length); // 4
for (var i = 0; i < publish_slider.children.length; i++) {
        var a = document.createElement('a');
        a.setAttribute('index', i);
        // set a property
        a.href = 'javascript:;';
        // Put a in the box
        b_dot.appendChild(a); 
        var x = banner_img.offsetWidth + 18; // +18 is because the displacement is a little offset
        // Click dot event
        a.addEventListener('click', function () {
            // 4. Exclusive thought, kill everyone and leave myself
            b_dot.querySelector('.on').classList.remove('on');
            this.classList.add('on');
            // Click the small dot to get the index number
            var index = this.getAttribute('index');
            num = index;
            console.log(num);
            // Call the animate function
            animate(publish_slider, -num * x);
        })
    }

2.4 several error prone points:

b_dot.querySelector('.on') is easy to write. There is no point added to on in it
remove('on '); or add('on'); it's easy to add points in this, but it shouldn't
var as = b_dot.querySelectorAll('a '); get the a element, and All is not added before it, resulting in an error
Pay attention to the binding event, output the test, and obtain the element

two . 5 page refresh has a small dot and a class name

     // Set of a selected by father
     var as = b_dot.querySelectorAll('a');
     // The class name of the first element is set to on to refresh the display
     as[0].className = 'on';

Writing method 2: event delegate · e.target: it can obtain the currently clicked object

b_dot.addEventListener('click', function (e) {
    // console.log(e.target); 
    b_dot.querySelector('.on').classList.remove('on');
    e.target.classList.add('on');
})

1.4 cloning small li cells

     var first = publish_slider.children[0].cloneNode(true);
     publish_slider.appendChild(first);

Clone: cloneNode(true)
Insert at the end of the element with: appendChild
The first clone of the child in the parent box: publish_slider.children[0]

1.5 click the button on the right to scroll the picture

Principle of seamless rolling:

Clone the first picture and put it at the back
When you click the button to move to the last picture, the picture is cloned. At this time, quickly let ul jump to the first position, and num becomes 0. Because the animation function is not called, the audience can't see this step
At the same time, turn num + + into 1, and then call the animation function to scroll to the second picture
The whole is formed. I only click the button once, but execute it (let the if statement judge, ul moves to the far left, num becomes 0), num + + again, call the animate function, and realize the seamless connection between jumping from the last picture to the first picture and moving to the second picture

btn_ri.addEventListener('click', function () {
        // 7. Click the button on the right to move the picture
        if (num == publish_slider.children.length - 1) {
            // animate(publish_slider, -num * x); executing this will have a slow effect
            // You can't add transition below, or you'll reveal the truth. You can't use animate above 
            // Jump over quietly
            publish_slider.style.left = 0;
            num = 0;
        }
        // You can't add else branches here, otherwise seamless scrolling won't work
        num++;
        animate(publish_slider, -num * x);
        console.log(num);

    })

1.6 click the button on the right to change the small circle points synchronously

        btn_ri.addEventListener('click', function () {
        // 7. Click the button on the right to move the picture
        if (num == publish_slider.children.length - 1) {
            // animate(publish_slider, -num * x); executing this will have a slow effect
            publish_slider.style.left = 0;
            num = 0;
        }
        num++;
        animate(publish_slider, -num * x);
        // console.log(num);
		
        
       ,//Clicking the button dot also switches, just using the following code
        circle++;
        if (circle == b_dot.children.length) {
            circle = 0;
        }
        circleChange();
    })

Error prone points:

Whether circle + + is written above or below the if statement, you can try it. If it is written below, circle can get 4
b. The length of dot.children is not the length of b_dot
When you're done here, call the function again
At this time, there is no need to establish a connection with index or num

1.7.1 the left button picture can scroll

        btn_le.addEventListener('click', function () {
        // 7. Click the button on the right to move the picture
        if (num == 0) {
            num = publish_slider.children.length - 1;
            // It's wrong not to add px here
            publish_slider.style.left = - num * x + 'px';
        }
        num--;
        animate(publish_slider, -num * x);
        // console.log(num);

        // circle = num; this statement is wrong
        circle--;
        if (circle < 0) {
            circle = b_dot.children.length - 1;
        }
         // The following ternary code is more economical
         // circle = circle < 0 ? b_dot.children.length - 1 : circle;
        circleChange();
    })

Click the button on the left to note the seamless operation:

Similar to the button on the right, when you are in the first picture, click the button again to switch to the cloned picture. The index is publish_slider.children.length, and move again after num -- so that you can switch to the picture before cloning
Remember that a place without PX is wrong. Publish_slider. Style. Left = - num * x +'px ';
The circle is also --; if it is less than 0, let it be equal to the child's length minus - 1
Finally, call the function to separate ideas.

1.7.2 small bug num = index; circle = index (just add two lines of code)

            a.addEventListener('click', function () {
            // 4. Exclusive thought, kill everyone and leave myself

            // Click the small dot to get the index number
            var index = this.getAttribute('index');
            num = index; // This button cannot be moved without setting
            circle = index; // This exclusive thought cannot succeed without setting small dots
            // console.log(num);
            circleChange();
            // Call the animate function
            animate(publish_slider, -num * x);
        })

Question 1: clicking the dot image will not switch; num = index

Question 2: clicking the small circle will not switch the class name; circle = index

1.8 automatic broadcast of rotation chart

Turn on the timer

 var timer = setInterval(function () {
         btn_ri.click();
     }, 2000);

When the mouse passes through a large area, close the timer, leave the mouse and open the timer; just add a few lines of code

 banner_img.addEventListener('mouseenter', function () {
         banner_btn.style.display = 'block';
         clearInterval(timer);
     })
     banner_img.addEventListener('mouseleave', function () {
         banner_btn.style.display = 'none';
         timer = setInterval(function () {
             btn_ri.click();
         }, 2000);
     })

1.9 the throttle valve setting button cannot be pressed (just add a few lines of code)

Idea:

Declare flag variable = true first
At the beginning of the click event, only flag=true can be executed. In the if, the first is flag=false
When the animation function is finished, the animation is executed, and the callback function is executed, the flag is changed to true

var flag = true;
     btn_ri.addEventListener('click', function () {
         if (flag) {
             flag = false;
             // 7. Click the button on the right to move the picture
             if (num == publish_slider.children.length - 1) {
                 // animate(publish_slider, -num * x); executing this will have a slow effect
                 publish_slider.style.left = 0;
                 num = 0;
             }
             num++;
             animate(publish_slider, -num * x, function () {
                 flag = true;
             });
             // console.log(num);
 
             // circle = num; this statement is wrong
             circle++;
             if (circle == b_dot.children.length) {
                 circle = 0;
             }
             circleChange();
         }
     })

Personal student id: 201903090124

name: hangshao

If you have different views, please correct them.

Posted by KC8Alen on Sat, 16 Oct 2021 00:13:49 -0700

Programmer Group