JS implementation of carousel example

// Get the left and right arrow elements let arrow_l = this.document.querySelector('.arrow-l');
    let arrow_r = this.document.querySelector('.arrow-r');
    // Get the slideshow box element let focus = this.document.querySelector('.focus');

    // Add mouse in and out events to the slideshow box to show or hide the left and right arrows focus.addEventListener('mouseenter', function(e) {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        // Clear the timing function when the mouse moves in, and the carousel will no longer slide automatically clearInterval(timer);
        timer = null;

    });

    focus.addEventListener('mouseleave', function(e) {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        //Move the mouse out to add a timed task, trigger a click of the right arrow every 2 seconds timer = setInterval(function() {
            arrow_r.click();
        }, 2000);
    })

// Get the ul list (slideshow list) and ol list (small circle list) elements var ul = focus.querySelector('ul');
// There are no elements in the ol list at this time var ol = focus.querySelector('.circle');
// Add as many small circles as there are slideshows in the circular slideshow list for (var i = 0; i < ul.children.length; i++) {
        // Create li tag var li = this.document.createElement('li');
        // Add custom attributes to the li tag as the subscript of the carousel image for li.setAttribute('l-index', i);
        // Add li tag to ol tag ol.appendChild(li);
        //Add a click function to each li tag li.addEventListener('click', function() {
            // Clear the style of all small circles for (var j = 0; j < ol.children.length; j++) {
                ol.children[j].className = '';
            }
            // Click on a small circle to add style this.className = 'current';

   // Click on the small circle to change num and circl to change the carousel num = this.getAttribute('l-index');
            circl = this.getAttribute('l-index');
            // Animation effect animate(ul, -num * focusWidth);
        })

    }

// Clone a node of the first slideshow and add it to ul // When playing to the last slideshow, switch to the first slideshow to make it look coherent ol.children[0].className = 'current';
    let cloneLi = ul.children[0].cloneNode(true);
    ul.appendChild(cloneLi);

    // Add a subscript to record the number of pictures played in the carousel num = 0;
    // Similar to num, record the subscript of the small circle circl = 0;
    // Add throttle flag = true;

// Click the right arrow's click event arrow_r.addEventListener('click', function(e) {
        // Add a throttle. The default value is True. If it is changed to false immediately after clicking, if the last click event is not processed, the click event within this time will not be processed. if (flag) {
            //Change the state of the throttle valve flag = false;

            // If the num index is the last one, restore to the first one and change the num index to the default 0
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;

            }
            // num subscript plus 1
            num++;
            // Change the animation effect to slide to the number of slides * the width of one slide animate(ul, -num * focusWidth, function() {
                // callback function sets throttle to true so you can click again flag = true;
            });

            // Small circle +1
            circl++;
            // If the small circle reaches the last one, it will be restored to 0
            if (circl == ul.children.length - 1) {
                circl = 0;
            }
            // Change the style of the small circle circlChange();
        }
    })

//Left arrow click event arrow_l.addEventListener('click', function(e) {
        if (flag) {
            flag = false;
            // When the value is 0, it means starting from the first image and going left if (num == 0) {
                // Change the num subscript to the last one num = ul.children.length - 1;
                // Change the carousel image to the last one ul.style.left = -num * focusWidth + 'px';
            }
            // num -1
            num--;
            // animation effect animate(ul, -num * focusWidth, function() {
                flag = true;
            });
            // If the small circle is 0, it means we have reached the first slideshow if (circl == 0) {
                // Small circle to the last circl = ul.children.length - 1;
            }
            // Small circle -1
            circl--;
            // Change the style of the small circle circlChange();
        }
    })

function circlChange() {
     // Traverse the ol list and delete the style of each small circle for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        };
        // Add style to the small circle of the current circl subscript ol.children[circl].className = 'current';
    }

function animate(obj, target, callback) {
    // console.log(callback); callback = function() {} when calling callback()


    // Clear the previous timer first, and keep only the current timer to execute clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // Write the step value to the timer // Change our step value to an integer to avoid decimal problems // var step = Math.ceil((target - obj.offsetLeft) / 10);
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            // Stopping the animation essentially stops the timer clearInterval(obj.timer);
            //Write the callback function to the end of the timer // if (callback) {
            // // Call function // callback();
            // }
            callback && callback();
        }
        // Change the step value of increasing by 1 each time to a gradually decreasing value. Step formula: (target value - current position) / 10
        obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
}