JavaScript to implement the most complete code analysis of simple carousel (ES6 object-oriented)

This article shares the specific code of JavaScript to implement a simple carousel for your reference. The specific content is as follows

Full code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ES6 Carousel Image</title>
    <script></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 500px;
            height: 300px;
            border: 1px solid silver;
            overflow: hidden;
            margin: auto;
            margin-top: 50px;
            position: relative;
            top: 0;
            left: 0;
        }
        .outer {
            list-style: none;
            position: absolute;
            top: 0;
            left: 0;
            transition: .3s all linear;
        }
        .img {
            width: 500px;
            height: 300px;
            float: left;
        }
  .btns span {
   position: absolute;
   width: 25px;
   height: 40px;
   top: 50%;
   margin-top: -20px;
   line-height: 40px;
   text-align: center;
   font-weight: bold;
   font-family: Simsun;
   font-size: 30px;
   border: 1px solid silver;
   opacity: 0.5;
   cursor: pointer;
   color: #fff;
   background: black;
  }
  .btns .left {
   left: 5px;
  }
  .btns .right {
   left: 100%;
   margin-left: -32px;
  }
        .right > :first-child, .left > :first-child {
            width: 35px;
            height: 35px;
        }
        .oOl {
            width: 163px;
            position: absolute;
            right: 0;
            left: 0;
            margin: auto;
            bottom: 10px;
            list-style: none;
        }
        .oLi {
            width: 25px;
            height: 25px;
            background: white;
            border-radius: 50%;
            float: left;
        }
        .color {
            background: black;
        }
    </style>
</head>
<body>
<div class="box">
    <ul class="outer">
        <li class="img" style="background-image:url(img/0.jpeg)"></li>
        <li class="img" style="background-image:url(img/1.jpeg)"></li>
        <li class="img" style="background-image:url(img/2.jpeg)"></li>
        <li class="img" style="background-image:url(img/3.jpeg)"></li>
        <li class="img" style="background-image:url(img/4.jpeg)"></li>
    </ul>
 <div class="btns">
  <span class="left">&lt;</span>
  <span class="right">&gt;</span>
 </div>
</div>
</body>
<script>
    class Chart{
        constructor(name, json) {
   //Get the box name this.box = document.querySelector(name);
            this.json = json;
            //Get the properties of the carousel this.outer = document.querySelector(name + ' .outer'); //Note the space this.left = document.querySelector(name + ' .left');
            this.right = document.querySelector(name + ' .right');
            //Initialize this.timer = null; //Automatically play this.iNow = 0;
            this.init();
        }
        init() {
            const that = this; //Save a this
            console.log(this.json.a);
            if (this.json.a){
                console.log(1);
            }
            //Clone the first one and put it at the end let uLi = that.outer.children[0].cloneNode(true);
            that.outer.appendChild(uLi);
            that.outer.style.width = that.outer.children.length * that.outer.children[0].offsetWidth + 'px';
            //Click to slide left and right if (that.json.slide) {
                that.left.style.display = 'block';
                that.right.style.display = 'block';
                this.left.onclick = () => that.rightGo();
                this.right.onclick = () => that.leftGo();
            }
            //Automatically play if (that.json.move) {
                that.moveGo();
                //Mouse moves in and out if (that.json.loop) {
                    that.box.onmousemove = () => clearInterval(that.timer);
                    that.box.onmouseout = () => that.moveGo();
                }
            }
            //Show small dots if (that.json.nav) {
                let oOL = document.createElement('ol');
                oOL.className = 'oOl';
                oOL.style.left = that.json.distanceLeft + 'px';
                that.box.appendChild(oOL);
                for (let i = 0; i < that.outer.children.length - 1; i++) {
                    let oLi = document.createElement('li');
                    oLi.className = 'oLi';
                    oLi.style.marginLeft = that.json.distance + 'px';
                    oOL.appendChild(oLi);
                }
                oOL.style.width = ((that.outer.children.length - 1) * document.querySelector('.oLi').offsetWidth) + (that.json.distance * that.outer.children.length) + 'px';
                that.alike();
            }
        };
        rightGo() {
            this.iNow++;
            if (this.iNow >= this.outer.children.length) {
                this.iNow = 1;
                this.outer.style.transition = '0s all linear';
                this.outer.style.left = 0;
            }
            this.outer.style.left = -this.iNow * this.outer.children[0].offsetWidth + 'px';
            this.outer.style.transition = '0.3s all linear';
            this.alike();
        };
        leftGo() {
            this.iNow--;
            if (this.iNow <= -1) {
                this.iNow = this.outer.children.length - 1;
                this.outer.style.transition = '0s all linear';
                this.outer.style.left = -(this.outer.children.length - 1) * this.outer.children[0].offsetWidth + 'px';
                this.iNow = this.outer.children.length - 2;
            }
            this.outer.style.left = -this.iNow * this.outer.children[0].offsetWidth + 'px';
            this.outer.style.transition = '0.3s all linear';
   this.alike();
        };
        moveGo() {
            const that = this;
            this.timer = setInterval(() => that.rightGo(), that.json.speed || 1500)
        };
        //The dots correspond to each picture alike() {
            let li = document.querySelectorAll('.oLi');
            for (let i = 0; i < li.length; i++) {
                li[i].classList.remove('color');
                if (i == this.iNow) {
                    li[i].classList.add('color');
                } else {
                    li[i].classList.remove('color');
                }
                //Special: The last one is the first if (this.iNow == li.length) {
                    li[0].classList.add('color');
                }
                //Small dot click event if (this.json.event) {
                    li[i].onmouseover = () => {
                        for (let i = 0; i < li.length; i++) {
                            li[i].classList.remove('color');
                        }
                        li[i].classList.add('color');
                        this.outer.style.left = -i * this.outer.children[0].offsetWidth + 'px';
                    }
                }
            }
        }
    }
    new Chart('.box', {
        move: true, //Automatic carousel speed: 1500, //Carousel speed loop: true, //Mouse in and out effect slide: true, //Click left and right slide effect nav: true, //Show small dots distance: 20, //Small dot spacing event: true //Small dot event })
</script>
</html>

picture:

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:

Understanding and application of JavaScript ES6 destructuring operator
JavaScript to implement the most complete code analysis of a simple shopping cart (ES6 object-oriented)
Detailed explanation of the differences between var, let and const in JavaScript es6
Differences between ES6 inheritance and ES5 inheritance in js
Detailed explanation of how Node.js handles ES6 modules
Detailed explanation of JS ES6 coding standards
JS quickly master ES6 class usage
Detailed explanation of JS ES6 variable destructuring assignment
Several magical uses of JS ES6 spread operator
About front-end JavaScript ES6 details

<<: Why I recommend Nginx as a backend server proxy (reason analysis)

>>: A brief discussion on the datetime format when exporting table data from MySQL to Excel