JavaScript carousel

Time:2020-11-28

requirement:

  1. Mouse through the carousel map module, left and right buttons are displayed, left and right buttons are hidden
  2. Click the right button once, and the picture will play to the left, and so on. The left button is the same
  3. While the picture is playing, the following small circle module changes with it
  4. Click the small circle to play the corresponding picture
  5. The mouse does not go through the carousel, and the carousel will automatically play the picture
  6. After the mouse, the rotation chart module, automatic play stop

Code implementation:

autoPlay.html (copy and save it as an HTML file and open it to see the effect.)

Document
    
    
    



    
        
        <
        
        >

autoPlay.css:

li {
    list-style: none;
}

a {
    text-decoration: none;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #00e1ff;
}

.focus {
    overflow: hidden;
    position: relative;
    width: 721px;
    height: 455px;
    margin: 100px auto;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.6);
    border-radius: 40px;
}

.focus ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 600%;
}

.focus ul li {
    float: left;
}

.arrow-l {
    display: none;
    position: absolute;
    top: 50%;
    left: -12px;
    margin-top: -20px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, .3);
    text-align: center;
    line-height: 40px;
    color: #fff;
    font-size: 18px;
    border-radius: 0 50% 50% 0;
    z-index: 999;
}

.arrow-r {
    display: none;
    position: absolute;
    top: 50%;
    right: -12px;
    margin-top: -20px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, .3);
    text-align: center;
    line-height: 40px;
    color: #fff;
    font-size: 18px;
    border-radius: 50% 0 0 50%;
    z-index: 999;
}

.circle {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.circle li {
    float: left;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, .5);
    margin: 0 4px;
    border-radius: 50%;
    cursor: pointer;
}

.current {
    background-color: #fff;
    box-shadow: 0 0 10px #fff;
}

autoPlay.js:

window.addEventListener('load', function() {
    //Get element
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');
    var focus = document.querySelector('.focus');
    var focusWidth = focus.offsetWidth;
    //Custom animation function animate parameters, representing animation interval
    var step = 5;
    //Mouse after focus on the display of the left and right button, stop the timer
    focus.addEventListener('mouseenter', function() {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        clearInterval(timer);
        Timer = null; // clear timer
    });
    //When the mouse leaves focus, it hides the left and right buttons and calls the timer
    focus.addEventListener('mouseleave', function() {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        timer = setInterval(function() {
            //Manually call click events
            arrow_r.click();
        }, 2000);
    });

    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.circle');
    for (var i = 0; i < ul.children.length; i++) {
        //Create Li
        var li = document.createElement('li');
        //Set the custom attribute and record the index number of small circle
        li.setAttribute('index', i);
        //Li insertion ol
        ol.appendChild(li);
        //The idea of small circle exclusion generates circles and binds events directly at the same time
        li.addEventListener('click', function() {
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            this.className = 'current';
            //Click on the small circle, move the picture, moving is UL
            //Click Li to get the current index number
            var index = this.getAttribute('index');
            //When you click Li, you need to give the index to num to synchronize
            num = index;
            //When you click Li, you need to give the index to circle to synchronize
            circle = index;
            animate(ul, -index * focusWidth, step);
        });
    }
    //The class name of the first Li in ol is set to current
    ol.children[0].className = 'current';
    var num = 0;
    //Circle controls the playback of small circles
    var circle = 0;
    //Clone the first chapter image Li and put it at the end of UL
    //To clone after generating a small circle
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    //Click the right button to scroll the picture
    arrow_r.addEventListener('click', function() {
        //If you get to the last picture, UL needs to quickly restore: left to 0
        if (num == ul.children.length - 1) {
            ul.style.left = 0;
            num = 0;
        }
        num++;
        animate(ul, -num * focusWidth, step);
        //Circle controls the playback of small circles
        circle++;
        circle = circle == ol.children.length ? 0 : circle;
        circleChange();
    });

    //Click the left button to scroll the picture
    arrow_l.addEventListener('click', function() {
        if (num == 0) {
            num = ul.children.length - 1;
            ul.style.left = -num * focusWidth + 'px';
        }
        num--;
        animate(ul, -num * focusWidth, step);
        //Circle controls the playback of small circles
        circle--;
        circle = circle < 0 ? (ol.children.length - 1) : circle;
        circleChange();
    });

    //Small circles change style
    function circleChange() {
        //Exclusive
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        //Keep yourself
        ol.children[circle].className = 'current';
    }

    //Auto play function
    var timer = setInterval(function() {
        //Manually call click events
        arrow_r.click();
    }, 2000);
});

animate.js:

function animate(obj, target, time, callback) {
    //First clear the previous timer, and only keep the current timer execution
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        //The step value is written into the timer and set to an integer
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
            //The callback function is written to the end of the timer
            callback && callback();
        }
        obj.style.left = obj.offsetLeft + step + 'px';
    }, time);
}

Details of custom animation function animate

Implementation effect: