JavaScript使用构造函数实现无缝滚动轮播图

      最近学习了构造函数和class类，于是大脑突发异想(恶疾)，想着能不能实现一些实用的功能，就有了今天的这个小项目，使用构造函数实现无缝滚动轮播图。

       这就是js + html代码(css代码过于难视就不展现了):

​
    <div class="side-show">
        <div class="arrow">
            <span class="arrow-l">&lt;</span>
            <span class="arrow-r">&gt;</span>
        </div>

        <div class="totn">
            <span style="background-color: gray;"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>

        <ul>
            <li><img src="./image/1.jfif"></li>
            <li><img src="./image/2.jfif"></li>
            <li><img src="./image/3.jfif"></li>
            <li><img src="./image/4.jfif"></li>
            <li><img src="./image/5.jfif"></li>
        </ul>
    </div>

    <script>
        function SideShow(className) {
            //设置主体
            this.main = document.querySelector(className);
            this.ph = this.main.querySelector('ul');
            this.lph = this.ph.getElementsByTagName('li')
            this.arrowLe = this.main.querySelector('.arrow-l');
            this.arrowRi = this.main.querySelector('.arrow-r');
            this.totn = this.main.querySelector('.totn')
            this.btn = this.totn.querySelectorAll('span');
            this.time = null;
            this.showtimer = null;
            this.init()
        }

        //初始化
        SideShow.prototype.init = function () {
            that = this;
            num = 0;
            this.focus();
            this.clone();
            this.clickRi();
            this.clickLe();
            this.auto();
        }

        //在图片后面克隆一张图片
        SideShow.prototype.clone = function () {
            let firstLi = that.lph[0].cloneNode(true);
            that.ph.appendChild(firstLi);
        }

        //封装动画样式(横向)
        SideShow.prototype.move = function (obj, target, callback) {
            clearInterval(that.time);
            that.time = setInterval(() => {
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (obj.offsetLeft == target) {
                    clearInterval(that.time);
                }
                if (callback) {
                    callback();
                } else {
                    obj.style.left = obj.offsetLeft + step + 'px';
                }
            }, 20);
            
        }

        //小圆点点击移动图片
        SideShow.prototype.focus = function () {
            let btn = this.btn;
            btn.forEach((value, index) => {
                value.addEventListener('click', function () {
                    for (let i = 0; i < btn.length; i++) {
                        btn[i].style.backgroundColor = 'white'
                    }
                    num = index
                    this.style.backgroundColor = 'gray'
                    let focuseWidth = -(that.main.offsetWidth * index);
                    that.move(that.ph, focuseWidth);
                });
            })
        }

        //右侧按钮点击
        SideShow.prototype.clickRi = function () {
            let arrowRi = this.arrowRi;
            arrowRi.addEventListener('click', function () {
                if (num == that.lph.length - 1) {
                    // console.log(1);
                    that.ph.style.left = 0 + 'px';
                    num = 0;
                }
                let btnIndex = num + 1;
                btnIndex = btnIndex >= that.btn.length ? 0 : btnIndex;
                that.btn.forEach(value => value.style.backgroundColor = 'white');
                that.btn[btnIndex].style.backgroundColor = 'gray';
                num++;
                let focuseWidth = -(that.main.offsetWidth * num);
                that.move(that.ph, focuseWidth);
            })
        }

        //左侧按钮点击
        SideShow.prototype.clickLe = function () {
            let arrowLe = this.arrowLe;
            arrowLe.addEventListener('click', function () {
                if (num == 0) {
                    num = that.lph.length - 1;
                    that.ph.style.left = -num * that.main.offsetWidth + 'px';
                }
                num--;
                that.btn.forEach(value => value.style.backgroundColor = 'white');
                that.btn[num].style.backgroundColor = 'gray';
                let focuseWidth = that.main.offsetWidth * -num;
                that.move(that.ph, focuseWidth);
            })
        }

        //自动播放
        SideShow.prototype.auto = function() {
            that.showtimer = setInterval(() => {
                that.arrowRi.click();
            }, 1000);
            that.main.addEventListener('mouseenter',function () {
                clearInterval(that.showtimer);
            })
            that.main.addEventListener('mouseleave', function() {
                that.showtimer = setInterval(() => {
                that.arrowRi.click();
            }, 1000);
            })
        }
        new SideShow('.side-show')

​

    实现后效果还是达到的，代码还是不够优化，后续会加以改进，如果发现bug，欢迎各位大佬指点！(鞠躬)