javascript實(shí)現(xiàn)花樣輪播效果

更新時(shí)間：2021年09月06日 16:24:06 作者：最love酸奶

這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)花樣輪播效果，一種是帶按鈕的輪播，一種是自動(dòng)輪播，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了javascript實(shí)現(xiàn)花樣輪播效果的兩種實(shí)現(xiàn)方法，供大家參考，具體內(nèi)容如下

第一種：簡單的帶按鈕的輪播

介紹：左右按鈕控制輪播，點(diǎn)擊左按鈕切換上一張圖片，點(diǎn)擊右按鈕切換下一張

html如下：

<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如下：

.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如下：

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

            // 要進(jìn)來的
            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(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++;
                    // 要走的索引永遠(yuǎn)是進(jìn)來的索引-1
                    this.iPrev = this.iNow - 1;
                }
            }
            // 根據(jù)索引開始運(yùn)動(dòng)
            this.move(direct);
        }
        move(direct){
            if(direct == 1){
                // iPrev走
                    // 從0，走到1000
                this.child[this.iPrev].style.left = 0;
                move(this.child[this.iPrev],{left:1000});
                // iNow進(jìn)來
                    // 從-1000，進(jìn)到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();

第二種：自動(dòng)輪播

介紹：兩個(gè)左右按鈕可以控制圖片左右切換，下面帶有數(shù)字的按鈕，點(diǎn)擊數(shù)字幾，就可以切換到第幾張，自動(dòng)輪播的過程中，鼠標(biāo)進(jìn)入停止輪播，鼠標(biāo)離開繼續(xù)輪播

htm代碼如下：

<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>

css代碼如下：

.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;}

js代碼如下：

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.事件委托綁定事件
            this.list.onclick = function(eve){
                var e = eve || window.event;
                var tar = e.target || e.srcElement;
                if(tar.tagName == "SPAN"){
                    // L4.觸發(fā)事件時(shí)，執(zhí)行改變索引，同時(shí)將點(diǎn)前點(diǎn)擊的span傳入
                    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){
            // 根據(jù)左右按鈕傳入的狀態(tài)：左1，右-1
            // 利用乘法
            // 改變不同按鈕的方向問題
            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.創(chuàng)建對(duì)應(yīng)圖片數(shù)量的span，同時(shí)編號(hào)
            var str = ``;
            for(var i=0;i<this.child.length;i++){
                str += `<span index='${i}'>${i+1}</span>`;
            }
            this.list.innerHTML = str;

            // L2.設(shè)置默認(rèn)的當(dāng)前項(xiàng)
            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.確定要走的索引和要進(jìn)來的索引
            // this.iNow    要走的
            // 拿到點(diǎn)擊的span的編號(hào)     要進(jìn)來的
            var index = parseInt(tar.getAttribute("index"));
            // console.log(this.iNow, index);
            // L6-1.判斷方向
            if(index > this.iNow){
                // L7-1.向左運(yùn)動(dòng)
                this.listMove(1,index);
            }
            // L6-2.判斷方向
            if(index < this.iNow){
                // L7-2.向右運(yùn)動(dòng)
                this.listMove(-1,index);
            }

            // L8.將當(dāng)前點(diǎn)擊的索引設(shè)置成下次要走的索引
            this.iNow = index;

            // L9.根據(jù)修改之后的索引，設(shè)置當(dāng)前項(xiàng)
            this.setActive();
        }
        listMove(direct,index){
            // this.iNow走
                // 從哪走，走到哪
            this.child[this.iNow].style.left = 0;
            move(this.child[this.iNow],{left:-1000 * direct})
            // index進(jìn)來
                // 從哪進(jìn)來，進(jìn)到哪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();

兩個(gè)案例 js 里面的move是一個(gè)緩沖運(yùn)動(dòng)的封裝，代碼如下：

function move(ele,obj,cb){
    clearInterval(ele.t);
    ele.t = setInterval(() => {
        // 假設(shè)狀態(tài)為：可以清除計(jì)時(shí)器
        var i = true;
        // 因?yàn)樵谟?jì)時(shí)器中才開始使用到對(duì)象中的信息，所以在計(jì)時(shí)器中遍歷
        // 并提前換來的屬性和目標(biāo)變量
        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);
            // 只要有一個(gè)屬性到目標(biāo)，就停了，不對(duì)
            // 必須所有屬性到目標(biāo)，才能停

            // 只要有一個(gè)屬性沒到目標(biāo)，絕對(duì)不能停
                // 用狀態(tài)來標(biāo)記到底要不要停止計(jì)時(shí)器

            // 只要有一個(gè)屬性沒到目標(biāo)：絕對(duì)不能清除計(jì)時(shí)器
            if(iNow !== obj[attr]){
                i = false;
            }
            if(attr == "opacity"){
                ele.style.opacity = (iNow + speed)/100;
            }else{
                ele.style[attr] = iNow + speed + "px";
            }
        }
        // 如果每次計(jì)時(shí)器執(zhí)行結(jié)束，所有屬性都執(zhí)行了一遍之后，狀態(tài)還是true，表示，沒有被改成false，如果沒有被改成false，表示沒有屬性沒到終點(diǎn)，那么狀態(tài)還是false就不清除
        if(i){
            clearInterval(ele.t);
            // 用戶決定在動(dòng)畫結(jié)束時(shí)要執(zhí)行的功能，萬一用戶沒傳參，做個(gè)默認(rèn)判斷
            if(cb){
                cb();
            }
            // cb && cb();
        }
    }, 30);
}

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

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: