js利用构造函数封装轮播图

html

    <div>
        <ul>
            <li><img src="images/1.webp" alt=""></li>
            <li><img src="images/2.webp" alt=""></li>
            <li><img src="images/3.webp" alt=""></li>
            <li><img src="images/4.webp" alt=""></li>
        </ul>
        <span class="iconfont left">&#xe602;</span>
        <span class="iconfont right">&#xe622;</span>
    </div>

css

        * {
            margin: 0;
            padding: 0;
        }
        
        @font-face {
            font-family: "iconfont";
            src: url('./font/iconfont.ttf') format('truetype')
        }
        
        .iconfont {
            font-family: "iconfont" !important;
            font-size: 30px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        li {
            list-style: none;
        }
        
        img {
            width: 500px;
            height: 260px;
        }
        
        ul {
            position: relative;
            width: 2000px;
            display: flex;
            transition: all 1000ms;
        }
        
        div {
            position: relative;
            margin: 50px auto;
            width: 500px;
            overflow: hidden;
        }
        
        ol {
            position: relative;
            bottom: 30px;
            left: 30%;
            display: flex;
        }
        
        ol li {
            width: 15px;
            height: 15px;
            margin-right: 40px;
            background-color: rgba(0, 0, 0, 0.479);
            border-radius: 100%;
        }
        
        span {
            position: absolute;
            top: calc(50% - 20px);
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: rgba(0, 0, 0, 0.301);
            color: #fafafa;
            cursor: pointer;
        }
        
        .left {
            font-size: 26px;
        }
        
        .right {
            right: 0;
        }

js

        function SlideShow() {
            this.ul = document.querySelector('ul');
            this.lis = document.querySelectorAll('ul li');
            this.div = document.querySelector('div');
            this.left = document.querySelector('.left');
            this.right = document.querySelector('.right');
            this.init();
        }
        //初始化
        SlideShow.prototype.init = function() {
            n = 0;
            _this = this;
            this.dot();
            this.autoplay();
            this.arrow();
            this.pause();
        }

        //自动播放
        SlideShow.prototype.autoplay = function() {
            timer = null;
            var newLis = document.querySelectorAll('ol li');
            timer = setInterval(() => {
                n++;
                n = n == 4 ? 0 : n;
                if (newLis.length != 0) {
                    newLis.forEach(value => value.style.backgroundColor = '')
                    newLis[n].style.backgroundColor = '#fff'
                }
                this.ul.style.marginLeft = -500 * n + 'px';
            }, 2000);
        }

        //是否生成导航圆点
        SlideShow.prototype.dot = function() {
            var ol = document.createElement('ol');
            this.div.appendChild(ol);
            this.lis.forEach(item => ol.appendChild(document.createElement('li')));
            var newLis = document.querySelectorAll('ol li');
            newLis[0].style.backgroundColor = '#fff';
            for (var i = 0; i < newLis.length; i++) {
                (function(i) {
                    newLis[i].onclick = function() {
                        newLis.forEach(value => value.style.backgroundColor = '');
                        newLis[i].style.backgroundColor = '#fff';
                        _this.ul.style.marginLeft = -500 * i + 'px';
                        return n = i;
                    }
                })(i)
            }
        }

        //箭头
        SlideShow.prototype.arrow = function() {
            var newLis = document.querySelectorAll('ol li');
            this.left.onclick = function() {
                clearInterval(timer);
                n = n == 0 ? 3 : --n;
                _this.ul.style.marginLeft = -500 * n + 'px';
                if (newLis.length != 0) {
                    newLis.forEach(value => value.style.backgroundColor = '');
                    newLis[n].style.backgroundColor = '#fff';
                }
            }
            this.right.onclick = function() {
                clearInterval(timer);
                n = n == 3 ? 0 : ++n;
                _this.ul.style.marginLeft = -500 * n + 'px';
                if (newLis.length != 0) {
                    newLis.forEach(value => value.style.backgroundColor = '');
                    newLis[n].style.backgroundColor = '#fff';
                }
            }
        }

        //暂停
        SlideShow.prototype.pause = function() {
            this.div.onmouseenter = function() {
                clearInterval(timer);
            }
            this.div.onmouseleave = function() {
                _this.autoplay();
            }
        }

        var sli = new SlideShow();