如何用构造函数面向对象方法写轮播图（简单易懂）

首先我们需要有几张大小差不多的图片，以及对应数量的图片导航

        

            

            

            

            

        
        

            //图片导航
            
1
            
2
            
3
            
4
        
        <
        >
    

然后我们简单排个版

*{
    margin: 0;
    padding: 0;
    list-style: none;
}
div{
    width: 1050px;
    height: 500px;
    margin: 0 auto;
    position: relative;
    span{
        display: inline-block;
        width: 40px;
        height: 80px;
        background-color:rgba(82, 78, 78, 0.5);
        line-height: 80px;
        font-size: 40px;
        text-align: center;
        color: #e1e1e1;
        position: absolute;
        top: 50%;
        margin-top: -40px;
        &:nth-of-type(2){
            right: 0;
        }

    }
    ol{
        position: absolute;
        bottom: 30px;
        left: 0;
        margin-left: 450px;
        li{
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            margin-right: 30px;
            border-radius: 50%;
            color: #fff;
            background-color: #999;
            float: left;
        }
        .active{
            background-color: rgba(48, 46, 46, 0.5);
        }
    }
}
ul li,ul li img{
    width: 100%;
    height: 500px;
}
ul li{
    display: none;
    
}
.active{
        display: block;
    }

面向对象方法呢，我们首先来封装一个构建函数

function Lun(){
        
    }

接下来在这个构造函数的prototype里写一些东西，当然不要忘记让它的prototype里的constructor属性指向这个构造函数本身

Lun.prototype = {
        constructor: Lun,
        init(){//事件的调用集合（名字自己取的，叫什么都可以）
        }
}
在构造函数里直接调用init()就可以啦
function Lun(){
        
        this.init();
    }

最后来安排一下构造函数的实例化

var lunBo = new Lun();

话不多说，直接上轮播图代码

window.onload = function () {
    function Lun() {
        this.timer = null;//初始化一个定时器
        this.index = 0;//初始化下标
        //获取
        this.down = document.querySelector('#down');
        this.up = document.querySelector('#up');
        this.imgs = document.querySelectorAll('ul li');
        this.lis = document.querySelectorAll('ol li');
        this.div = document.querySelector('div');
        //调用
        this.init();
    }
    Lun.prototype = {
        constructor: Lun,
        // 事件调用合集
        init() {
            this.addEvent()
            this.auto()
        },
        //切换排他
        qiehuan(ind) {//接受一个参数，下标
            for (let i = 0; i < this.imgs.length; i++) {//for循环排他思想
                this.imgs[i].classList.remove('active');
                this.lis[i].classList.remove('active');
            }
            this.imgs[ind].classList.add('active');
            this.lis[ind].classList.add('active');
        },
        //事件
        addEvent() {
            let that = this;
            //点击下一张
            this.down.onclick = function () {
                    that.index++;//下标增加
                    if (that.index > that.imgs.length - 1) {//大于最后一张就回到第一张
                        that.index = 0;
                    }
                    that.qiehuan(that.index)//调用排他
                },
                //点击上一张
                this.up.onclick = function () {
                    that.index--;//下标减小
                    if (that.index < 0) {//小于第一张就回到最后一张
                        that.index = that.imgs.length - 1;
                    }
                    that.qiehuan(that.index)//调用排他
                },
                //鼠标移入清除定时器
                this.div.onmouseover = function () {
                    clearInterval(that.timer);
                    that.timer = null;
                },
                //鼠标移入调用定时器
                this.div.onmouseout = function () {
                    that.auto();
                };
            //点击图片导航
            for (let i = 0; i < this.lis.length; i++) {
                this.lis[i].onclick = function () {
                    that.index = i;//同步下标，点哪个就换哪张图
                    that.qiehuan(that.index)
                }
            }
        },
        //定时器
        auto() {
            let that = this;
            this.timer = setInterval(function () {
                that.index++;
                if (that.index > that.imgs.length - 1) {
                    that.index = 0;
                }
                that.qiehuan(that.index)
            }, 1000)
        },
    }
    var lunBo = new Lun();
    
}