js to create a carousel effect

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:
  • JS implementation of carousel example
  • 3 simple ways to achieve carousel effects with JS
  • js to achieve 3D carousel effect
  • Pure js to achieve the effect of carousel
  • Native JS to implement breathing carousel
  • JavaScript imitates Xiaomi carousel effect
  • About the implementation of JavaScript carousel

<<:  Docker-compose installation db2 database operation

>>:  How to install redis in docker and set password and connect

Recommend

CSS list sliding to prevent being covered by the bottom and adapt to the longer screen model processing

1. When the mobile terminal processes the list sl...

MYSQL unlock and lock table introduction

MySQL Lock Overview Compared with other databases...

HTML/CSS Basics - Several precautions in HTML code writing (must read)

The warning points in this article have nothing t...

Steps for importing tens of millions of data into MySQL using .Net Core

Table of contents Preliminary preparation Impleme...

Example code of how CSS matches multiple classes

CSS matches multiple classes The following HTML t...

Vue implements scroll loading table

Table of contents Achieve results Rolling load kn...

Automatically log out inactive users after login timeout in Linux

Method 1: Modify the .bashrc or .bash_profile fil...

Detailed explanation of the implementation principle of MySQL transactions and Spring isolation levels

1. Transactions have ACID characteristics Atomici...

MySQL multi-table join query example explanation

In actual projects, there are relationships betwe...

How to solve the front-end cross-domain problem using Nginx proxy

Preface Nginx (pronounced "engine X") i...

Solution to MySQL unable to read table error (MySQL 1018 error)

1. Error reproduction I can access the MySQL data...

Tips for using the docker inspect command

Description and Introduction Docker inspect is a ...

How to create Apache image using Dockerfile

Table of contents 1. Docker Image 2. Create an in...

The difference between VOLUME and docker -v in Dockerfile

There are obvious differences between volume moun...

MYSQL5.6.33 database master/slave (Master/Slave) synchronization installation and configuration details (Master-Linux Slave-windows7)

1. Installation environment Here is also a record...