js 面向对象实现自动轮播图

最新推荐文章于 2022-02-08 14:33:29 发布

pengzihui

最新推荐文章于 2022-02-08 14:33:29 发布

阅读量1k

点赞数 2

文章标签： javascript html5 es6

本文链接：https://blog.csdn.net/pengzihui/article/details/104764704

版权

js实现面向对象自动轮播图，自动轮播图运用于很多电商平台。也是前端必会的。一项内容效果。
轮播图的实现。需要用到的主要知识点：运动事件的绑定。事件的委托等等。

css部分:

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

html元素部分

<body>
    <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>
</body>
//以前准备好的运动引入。
<script src="../mov.js"></script>

<script>
    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);
            })
            // 将按钮全部委托给他的父元素点击事件。
            this.list.onclick = function(eve){
                var e = eve || window.event;
                var tar = e.target || e.srcElement;
                if(tar.tagName == "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){
            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(){
            // 拼接按钮。并建立按钮元素。
            var str = ``;
            for(var i=0;i<this.child.length;i++){
                str += `<span index='${i}'>${i+1}</span>`;
            }
            this.list.innerHTML = str;
            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){
            var index = parseInt(tar.getAttribute("index"));
            // 点击按钮索引值大于当前图片索引值
            if(index > this.iNow){

                this.listMove(1,index);
            }
            // 点击按钮索引值小于当前图片索引值。
            if(index < this.iNow){
                this.listMove(-1,index);
            }
            this.iNow = index;
            this.setActive();
        }
        // 当点击按钮时判断图片运动的方向。传入两个参数。
        listMove(direct,index){
            this.child[this.iNow].style.left = 0;
            move(this.child[this.iNow],{left:-1000 * direct})
            this.child[index].style.left = 1000 * direct + "px";
            move(this.child[index],{left:0});
        }
        // 自动轮播。
        autoPlay(){
            var t = setInterval(()=>{
                this.changeIndex(-1);
            },1500)

            this.box.onmouseover = function(){
                clearInterval(t);
            }
            var that = this;
            this.box.onmouseout = function(){
                t = setInterval(()=>{
                    that.changeIndex(-1);
                },1500)
            }
        }
    }
    var b = new Banner();
    b.init();
    b.createList();
    b.autoPlay();
</script>

pengzihui

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js 面向对象实现自动轮播图

js实现面向对象自动轮播图，自动轮播图运用于很多电商平台。也是前端必会的。一项内容效果。轮播图的实现。需要用到的主要知识点：运动事件的绑定。事件的委托等等。css部分: <style> .box{width: 1000px;height: 300px;margin: 20px auto;position: relative;overflow: hidd...
复制链接

扫一扫