js to create a carousel effect

I think the carousel is a relatively important point in front-end development, because it contains a lot of native js knowledge points. The following is the process of learning to make a carousel

difficulty:

1. How to make the corresponding circles and pictures below automatically generated dynamically
2. How to make the circle below correspond to the picture
3. The distance that the boxes of the previous and next pages are moved
4. Fade-out animation effect when switching pictures
5. The concept of throttle valve

Effect:

Code:

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
 
        a {
            text-decoration: none;
            color: white;
            line-height: 50px;
            text-align: center;
        }
 
        li {
            list-style: none;
        }
 
        .tb-promo {
            position: relative;
            width: 700px;
            height: 300px;
            margin: auto;
            overflow: hidden;
        }
 
        .tb-promo .imgg {
            position: absolute;
            top: 0;
            left: 0;
            width: 3000px;
        }
 
        .tb-promo .imgg li {
            float: left;
 
 
        }
 
        .tb-promo .imgg li img {
            width: 700px;
            height: 300px;
        }
 
        .tb-promo .prev {
            display: none;
            position: absolute;
            top: 125px;
            left: 0;
            width: 25px;
            height: 50px;
            background-color: rgba(0, 0, 0, 0.2);
            border-top-right-radius: 25px;
            border-bottom-right-radius: 25px;
            z-index: 999;
        }
 
        .tb-promo .prev:hover {
            background-color: rgba(0, 0, 0, 0.5);
        }
 
        .tb-promo .next {
            display: none;
            position: absolute;
            top: 125px;
            right: 0;
            width: 25px;
            height: 50px;
            background-color: rgba(0, 0, 0, 0.2);
            border-top-left-radius: 25px;
            border-bottom-left-radius: 25px;
            z-index: 999;
        }
 
        .tb-promo .next:hover {
            background-color: rgba(0, 0, 0, 0.5);
        }
 
        .tb-promo .promo-nav {
            position: absolute;
            top: 270px;
            left: 50%;
            margin-left: -40px;
 
            height: 25px;
 
        }
 
        .tb-promo .promo-nav li {
            float: left;
            width: 16px;
            height: 16px;
            background-color: white;
            border-radius: 8px;
            margin: 4px;
 
 
        }
 
        .tb-promo .promo-nav .one {
 
            background-color: tomato;
        }
    </style>
</head>
 
<body>
    <div class="tb-promo">
 
        <a href="javascript:;" class="prev"><</a>
                <a href="javascript:;" class="next">></a>
                <ul class="imgg">
                    <li><img src="./61.jpeg" alt=""></li>
                    <li><img src="./62.jpeg" alt=""></li>
                    <li><img src="./63.jpeg" alt=""></li>
 
                </ul>
                <ol class="promo-nav">
 
 
 
                </ol>
    </div>
    <script>
        var prev = document.querySelector('.prev');
        var next = document.querySelector('.next');
        var tbpromo = document.querySelector('.tb-promo');
        var ul = document.querySelector('ul');
        var ol = document.querySelector('ol');
        //Animation function function animate(obj, target) {
            clearInterval(obj.timer); //Call to prevent multiple clicks obj.timer = setInterval(function () {
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step); //Round positive and negative values if (obj.offsetLeft == target) {
                    clearInterval(obj.timer);
                } else {
                    obj.style.left = obj.offsetLeft + step + 'px';
                }
            }, 10)
        }
 
        //Generate dynamic navigation circle var tbpromWidth = tbpromo.offsetWidth;
        for (var i = 0; i < ul.children.length; i++) {
            var li = document.createElement('li');
            ol.appendChild(li);
            //Record index number through custom attribute li.setAttribute('index', i);
            //Exclusive idea to write circle color change li.addEventListener('click', function () {
                // Clear all circle colors for (var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = '';
                }
                this.className = 'one';
 
                var index = this.getAttribute('index');
                //Click li and assign the index number of li to the control variable num = index;
                circle=index;
                animate(ul, -index * tbpromWidth);
 
 
            })
            ol.children[0].className = 'one';
        }
        //Clone the first picture li and put it at the end for seamless switching var frist = ul.children[0].cloneNode(true);
        ul.appendChild(frist);
 
 
        //Hide and display the next and previous pages tbpromo.addEventListener('mouseenter', function () {
            prev.style.display = 'block';
            next.style.display = 'block';
            clearInterval(timer);
            timer=0; // clear the timer variable })
        tbpromo.addEventListener('mouseleave', function () {
            prev.style.display = 'none';
            next.style.display = 'none';
            timer = setInterval(function () {
            next.click(); //manually call the click event}, 1500)
 
        })
 
        //next prev animation var num = 0;
        //Control circle var circle = 0;
        //Throttle valve variable var flag=true;
        
        //Next page next.addEventListener('click', function () {
           
                //The last one is to judge ul and restore left to 0
            if (num == (ul.children.length - 1)) {
                ul.style.left = 0;
                num = 0;
            }
            
                num++;
                animate(ul, -num * tbpromWidth);
                circle++;
                if (circle == 3) {
                    circle = 0;
                }
                for (var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = '';
                }
                ol.children[circle].className = 'one';
           
            
        })
        //Previous page prev.addEventListener('click', function () {
            
            if (num == 0) {
                num = ul.children.length-1;
                ul.style.left = -num*tbpromWidth+'px';
                
            }
            else {
                num--;
                animate(ul, -num * tbpromWidth);
                circle--;
                if (circle <0) {
                    circle = 2;
                }
                for (var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = '';
                }
                ol.children[circle].className = 'one';
            }
        })
        //Automatic playback var timer = setInterval (function () {
            next.click(); //manually call the click event}, 2000)
    </script>
</body>
 
</html>

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: