首先我們需要有幾張大小差不多的圖片，以及對應數(shù)量的圖片導航

<div>
        <ul>
            <li class="active"><img src="./imgs/iu1.jpg" alt=""></li>
            <li><img src="./imgs/iu2.jpg" alt=""></li>
            <li><img src="./imgs/iu3.jpg" alt=""></li>
            <li><img src="./imgs/iu4.jpg" alt=""></li>
        </ul>
        <ol>
            //圖片導航
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ol>
        <span id="up">&lt;</span>
        <span id="down">&gt;</span>
    </div>

然后我們簡單排個版

*{
    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;
    }

面向?qū)ο蠓椒?，我們首先來封裝一個構(gòu)建函數(shù)

function Lun(){
        
    }

接下來在這個構(gòu)造函數(shù)的prototype里寫一些東西，當然不要忘記讓它的prototype里的constructor屬性指向這個構(gòu)造函數(shù)本身

Lun.prototype = {
        constructor: Lun,
        init(){//事件的調(diào)用集合（名字自己取的，叫什么都可以）
        }
}
在構(gòu)造函數(shù)里直接調(diào)用init()就可以啦
function Lun(){
        
        this.init();
    }

最后來安排一下構(gòu)造函數(shù)的實例化

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');
        //調(diào)用
        this.init();
    }
    Lun.prototype = {
        constructor: Lun,
        // 事件調(diào)用合集
        init() {
            this.addEvent()
            this.auto()
        },
        //切換排他
        qiehuan(ind) {//接受一個參數(shù)，下標
            for (let i = 0; i < this.imgs.length; i++) {//for循環(huán)排他思想
                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)//調(diào)用排他
                },
                //點擊上一張
                this.up.onclick = function () {
                    that.index--;//下標減小
                    if (that.index < 0) {//小于第一張就回到最后一張
                        that.index = that.imgs.length - 1;
                    }
                    that.qiehuan(that.index)//調(diào)用排他
                },
                //鼠標移入清除定時器
                this.div.onmouseover = function () {
                    clearInterval(that.timer);
                    that.timer = null;
                },
                //鼠標移入調(diào)用定時器
                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();
    
}