javascript realizes pattern carousel effect

In this paper, we share two implementation methods of javascript to realize pattern carousel effect for your reference. The specific contents are as follows

Type 1: Simple carousel with buttons

Introduction: The left and right buttons control carousel, click the left button to switch the upper picture, and click the right button to switch the next one

html is as follows:

<div class="box">
        <div class="imgbox">
            <a><img src="img/banner1.jpg" alt=""></a>
            <a><img src="img/banner2.jpg" alt=""></a>
            <a><img src="img/banner3.jpg" alt=""></a>
            <a><img src="img/banner4.jpg" alt=""></a>
            <a><img src="img/banner5.jpg" alt=""></a>
        </div>
        <div class="btns">
            <input type="button" id="left" value="<<<">
            <input type="button" id="right" value=">>>">
</div>

css is as follows:

.box{width: 1000px;height: 300px;margin: 20px auto;position: relative;overflow: hidden;}
        .box .imgbox{}
        .imgbox a{width: 1000px;height: 300px;position: absolute;left:1000px;top:0;}
        .imgbox a:nth-child(1){left:0;}
        .imgbox img{width: 1000px;height: 300px;}

        .btns input{width: 40px;height: 40px;position: absolute;top:130px;border: none;background: rgba(200,200,200,0.5);}
        #left{left:0;}
        #right{right: 0;}}

js is as follows:

class Banner{
        constructor(){
            this.left = document.getElementById("left");
            this.right = document.getElementById("right");
            this.child = document.querySelectorAll(".imgbox a");

            //  To come in 
            this.iNow = 0;
            //  To go 
            this.iPrev = this.child.length - 1;
        }
        init(){
            var that = this;
            this.left.addEventListener("click",function(){
                that.changeIndex(1);
            })
            this.right.addEventListener("click",function(){
                that.changeIndex(2);
            })
        }
        changeIndex(direct){
            if(direct == 1){
                if(this.iNow == 0){
                    this.iNow = this.child.length-1;
                    this.iPrev = 0;
                }else{
                    this.iNow--;
                    this.iPrev = this.iNow + 1;
                }
            }else{
                if(this.iNow == this.child.length-1){
                    this.iNow = 0;
                    this.iPrev = this.child.length-1;
                }else{
                    this.iNow++;
                    //  The index to go is always the index to come in -1
                    this.iPrev = this.iNow - 1;
                }
            }
            //  Start moving according to the index 
            this.move(direct);
        }
        move(direct){
            if(direct == 1){
                // iPrev Go 
                    //  From 0 , walk to 1000
                this.child[this.iPrev].style.left = 0;
                move(this.child[this.iPrev],{left:1000});
                // iNow Come in 
                    //  From -1000 , enter 0
                this.child[this.iNow].style.left = -1000 + "px";
                move(this.child[this.iNow],{left:0});
            }else{
                
                this.child[this.iPrev].style.left = 0;
                move(this.child[this.iPrev],{left:-1000});
                this.child[this.iNow].style.left = 1000 + "px";
                move(this.child[this.iNow],{left:0});
            }
        }
    }

var b = new Banner();
b.init();

Type 2: Automatic carousel

Introduction: Two or so buttons can control the picture to switch around, below with the number of buttons, click the number of a few, you can switch to which, automatic carousel in the process, the mouse into stop carousel, the mouse left to continue carousel

The htm code is as follows:

<div class="box">
        <div class="imgbox">
            <a><img src="../img/banner1.jpg" alt=""></a>
            <a><img src="../img/banner2.jpg" alt=""></a>
            <a><img src="../img/banner3.jpg" alt=""></a>
            <a><img src="../img/banner4.jpg" alt=""></a>
            <a><img src="../img/banner5.jpg" alt=""></a>
        </div>
        <div class="btns">
            <input type="button" id="left" value="<<<">
            <input type="button" id="right" value=">>>">
        </div>
        <div class="list">
        </div>
</div>

The code for css is as follows:

.box{width: 1000px;height: 300px;margin: 20px auto;position: relative;overflow: hidden;}
.box .imgbox{}
.imgbox a{width: 1000px;height: 300px;position: absolute;left:1000px;top:0;}
.imgbox a:nth-child(1){left:0;}
.imgbox img{width: 1000px;height: 300px;}

.btns input{width: 40px;height: 40px;position: absolute;top:130px;border: none;background: rgba(200,200,200,0.5);}
        #left{left:0;}
        #right{right: 0;}

.list{width: 1000px;height: 30px;position: absolute;left: 0;bottom: 0;display: flex;background: rgba(200,200,200,0.5);}
.list span{flex: 1;line-height: 30px;text-align: center;border-left:solid 1px black;border-right: solid 1px black;}
.list span.active{background: red;color: #fff;}

The js code is as follows:

class Banner{
        constructor(){
            this.left = document.getElementById("left");
            this.right = document.getElementById("right");
            this.child = document.querySelectorAll(".imgbox a");
            this.list = document.querySelector(".list");
            this.box = document.querySelector(".box");

            this.iNow = 0;
            this.iPrev = this.child.length - 1;
        }
        init(){
            var that = this;
            this.left.addEventListener("click",function(){
                that.changeIndex(1);
            })
            this.right.addEventListener("click",function(){
                that.changeIndex(-1);
            })
            // L3. Event delegate binding event 
            this.list.onclick = function(eve){
                var e = eve || window.event;
                var tar = e.target || e.srcElement;
                if(tar.tagName == "SPAN"){
                    // L4. When the event is triggered, the index is changed, and the span Incoming 
                    that.listChangeIndex(tar);
                }
            }
        }
        changeIndex(direct){
            if(direct == 1){
                if(this.iNow == 0){
                    this.iNow = this.child.length-1;
                    this.iPrev = 0;
                }else{
                    this.iNow--;
                    this.iPrev = this.iNow + 1;
                }
            }else{
                if(this.iNow == this.child.length-1){
                    this.iNow = 0;
                    this.iPrev = this.child.length-1;
                }else{
                    this.iNow++;
                    this.iPrev = this.iNow - 1;
                }
            }
            this.move(direct);
        }
        move(direct){
            //  According to the status passed in by the left and right buttons: left 1 , right -1
            //  Use multiplication 
            //  Changing the direction of different buttons 
            this.child[this.iPrev].style.left = 0;
            move(this.child[this.iPrev],{left:this.child[0].offsetWidth * direct});
            this.child[this.iNow].style.left = -this.child[0].offsetWidth * direct + "px";
            move(this.child[this.iNow],{left:0});

            this.setActive();
        }
        createList(){
            // L1. Object corresponding to the number of pictures span Simultaneous numbering 
            var str = ``;
            for(var i=0;i<this.child.length;i++){
                str += `<span index='${i}'>${i+1}</span>`;
            }
            this.list.innerHTML = str;

            // L2. Set the default current item 
            this.setActive();
        }
        setActive(){
            for(var i=0;i<this.list.children.length;i++){
                this.list.children[i].className = "";
            }
            this.list.children[this.iNow].className = "active";
        }
        listChangeIndex(tar){
            // L5. Determine the index to go and the index to come in 
            // this.iNow     To go 
            //  Get clicked span Number of       To come in 
            var index = parseInt(tar.getAttribute("index"));
            // console.log(this.iNow, index);
            // L6-1. Judge the direction 
            if(index > this.iNow){
                // L7-1. Move to the left 
                this.listMove(1,index);
            }
            // L6-2. Judge the direction 
            if(index < this.iNow){
                // L7-2. Move to the right 
                this.listMove(-1,index);
            }

            // L8. Set the index currently clicked to the index to be walked next time 
            this.iNow = index;

            // L9. Sets the current item according to the modified index 
            this.setActive();
        }
        listMove(direct,index){
            // this.iNow Go 
                //  Where to go, where to go 
            this.child[this.iNow].style.left = 0;
            move(this.child[this.iNow],{left:-1000 * direct})
            // index Come in 
                //  Where to come in, where to go s
            this.child[index].style.left = 1000 * direct + "px";
            move(this.child[index],{left:0});
        }
        autoPlay(){
            var t = setInterval(()=>{
                this.changeIndex(-1);
            },2000)

            this.box.onmouseover = function(){
                clearInterval(t);
            }

            var that = this;
            this.box.onmouseout = function(){
                t = setInterval(()=>{
                    that.changeIndex(-1);
                },2000)
            }
            
            // console.log(that);
        }
    }


var b = new Banner();
b.init();
b.createList();
b.autoPlay();

move in the two cases js is a encapsulation of buffered motion, and the code is as follows:

function move(ele,obj,cb){
    clearInterval(ele.t);
    ele.t = setInterval(() => {
        //  Suppose the state is: Timer can be cleared 
        var i = true;
        //  Because the information in the object is only used in the timer, it is traversed in the timer 
        //  And the attributes and target variables exchanged in advance 
        for(var attr in obj){
            if(attr == "opacity"){
                var iNow = getStyle(ele,attr) * 100;
            }else{
                var iNow = parseInt(getStyle(ele,attr));
            }
    
            let speed = (obj[attr] - iNow)/10;
            speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
            //  As long as there is 1 Attribute to the target, it stops, no 
            //  All attributes must go to the target before stopping 

            //  As long as there is 1 Attributes have not reached the target, and you must not stop 
                //  Use status to mark whether to stop the timer or not 

            //  As long as there is 1 Attributes missed the target: Never clear the timer 
            if(iNow !== obj[attr]){
                i = false;
            }
            if(attr == "opacity"){
                ele.style.opacity = (iNow + speed)/100;
            }else{
                ele.style[attr] = iNow + speed + "px";
            }
        }
        //  If each timer execution ends, all properties are executed 1 After all times, the status is still true It has not been changed to false If it is not changed to false Indicates that no attribute has not reached the end point, then the status is still false It won't be cleared 
        if(i){
            clearInterval(ele.t);
            //  The user decides what function to perform at the end of the animation, ten thousand 1 The user didn't pass the reference, so make a default judgment 
            if(cb){
                cb();
            }
            // cb && cb();
        }
    }, 30);
}

function getStyle(ele,attr){
    if(ele.currentStyle){
        return ele.currentStyle[attr];
    }else{
        return getComputedStyle(ele,false)[attr];
    }
}