javaScript用构造函数实现无缝轮播

首先先想想实现的思路：

1.构造函数，创建方法

2.渲染页面

3.实现点击向左并实现无缝

4.实现点击向右并实现无缝

5.实现点击圆点切换

6.实现自动播放

7.鼠标进入实现关闭自动播放

话不多说直接上代码

js部分：

---

function Carousel(src1, src2, src3, src4, src5) {// 创建五个形参用来存放图片
    var div
    this.types = function () {//创建一个方法用来渲染页面
        div = document.createElement('div')//创建一个div
        div.className = 'banner-box'//设置div的class
        //渲染内容，设置7个img用来实现无缝效果，向右和左的图标运用了font awesome字体图标库
        div.innerHTML = ` 
    <div class="imgs">
        <ul>
            <li><img draggable="false" src=${src5} alt=""></li>
            <li><img draggable="false" src=${src1} alt=""></li>
            <li><img draggable="false" src=${src2} alt=""></li>
            <li><img draggable="false" src=${src3} alt=""></li>
            <li><img draggable="false" src=${src4} alt=""></li>
            <li><img draggable="false" src=${src5} alt=""></li>
            <li><img draggable="false" src=${src1} alt=""></li>
        </ul>
    </div>
    <div class="dots">
        <span style="background-color: #fff;" data-ind="1"></span>
        <span data-ind="2"></span>
        <span data-ind="3"></span>
        <span data-ind="4"></span>
        <span data-ind="5"></span>
    </div>
    <div class="a-left"><i class="fa fa-angle-left fa-4x" aria-hidden="true"></i></div>
    <div class="a-right"><i class="fa fa-angle-right fa-4x" aria-hidden="true"></i></div>`
        //插入div
        document.querySelector('.se-lb').append(div)
    }
    this.gain = function () {//构造一些变量
        this.left = div.querySelector('.a-left')
        this.right = div.querySelector('.a-right')
        this.ul = div.querySelector('ul')
        this.spans = div.querySelectorAll('.dots span')
        this.liLen = this.ul.childElementCount
        this.a = 1
        // this.imgs = document.querySelector('.banner-box')
        this.ul.style.left = '-' + this.a * 1400 + 'px'
        this.fal = true
    }
    this.toright = function () {//实现点击向右
        this.right.onclick = function () {
            if (this.fal) {
                this.relColor()
                if (this.a != 5) {
                    this.spans[this.a].style.backgroundColor = '#fff'
                }
                this.fal = false
                this.ul.style.transition = 'all .5s'
                this.a++
                this.ul.style.left = -this.a * 1400 + 'px'
                if (this.a == 6) {
                    this.spans[0].style.backgroundColor = '#fff'
                    this.a = 0
                    this.ul.style.transition = 'all 0s'
                    this.ul.style.left = -this.a * 1400 + 'px'
                    setTimeout((e) => {
                        this.a = 1
                        this.ul.style.transition = 'all .5s'
                        this.ul.style.left = -this.a * 1400 + 'px'
                    }, 16.7)
                }
                setTimeout(() => {//节流阀
                    this.fal = true
                }, 16.7)
            }
        }.bind(this)//更改this指向
    }
    this.toleft = function () {
        this.left.onclick = function () {//构造点击向左
            if (this.fal) {
                this.relColor()
                if (this.a != 1) {
                    this.spans[this.a - 2].style.backgroundColor = '#fff'
                }
                this.fal = false
                this.ul.style.transition = 'all .5s'
                this.a--
                this.ul.style.left = -this.a * 1400 + 'px'
                if (this.a == 0) {
                    this.spans[4].style.backgroundColor = '#fff'
                    this.a = 6
                    this.ul.style.transition = 'all 0s'
                    this.ul.style.left = -this.a * 1400 + 'px'
                    setTimeout((e) => {
                        this.a = 5
                        this.ul.style.transition = 'all .5s'
                        this.ul.style.left = -this.a * 1400 + 'px'
                    }, 16.7);
                }
                setTimeout(() => {
                    this.fal = true
                }, 16.7)
            }
        }.bind(this)
    }
    this.relColor = function () {//下方的小圆点
        this.spans.forEach(function (es) {
            es.style.backgroundColor = ' rgb(134, 133, 133)'
        })
    }
    var set = setTimeout(e => {
        this.right.onclick()
    }, 3000)//定时器实现自动轮播
    this.dj = function () {//实现点击小圆点切换
        this.spans.forEach((el) => {
            el.onclick = function () {
                this.a = el.getAttribute('data-ind')
                this.ul.style.transition = 'all 1s'
                this.ul.style.left = '-' + this.a * 1400 + 'px'
                this.relColor()
                el.style.backgroundColor = '#fff'
            }.bind(this)
            el.onmouseover = function(){
                clearInterval(set)
            }.bind(this)//放进小圆点关闭定时器
        })
        //以下实现进入轮播和进入左右切换关闭定时器和离开打开定时器
        this.left.onmouseover = function () {
            this.right.style.display = 'block'
            this.left.style.display = 'block'
            clearInterval(set)
        }.bind(this)
        this.right.onmouseover = function () {
            this.right.style.display = 'block'
            this.left.style.display = 'block'
            clearInterval(set)
        }.bind(this)
        this.ul.onmouseover = function () {
            this.right.style.display = 'block'
            this.left.style.display = 'block'
            clearInterval(set)
        }.bind(this)
        this.ul.onmouseout = function () {
            this.right.style.display = 'none'
            this.left.style.display = 'none'
            set = setInterval(e => {
                this.right.click()
            }, 3000)
        }.bind(this)
        this.left.onmouseout = function () {
            this.right.style.display = 'none'
            this.left.style.display = 'none'
            set = setInterval(e => {
                this.right.click()
            }, 3000)
        }.bind(this)
        this.right.onmouseout = function () {
            this.right.style.display = 'none'
            this.left.style.display = 'none'
            set = setInterval(e => {
                this.right.click()
            }, 3000)
        }.bind(this)

    }
    this.ind = function () {//应用方法
        this.types()//构造html
        this.gain()//获取元素
        this.toright()//点击向右
        this.toleft()//点击向左
        this.dj()//点击原点
    }
}

var caras = new Carousel(`./img/1.jpg`, `./img/2.jpg`, `./img/3.jpg`, `./img/4.jpg`, `./img/5.jpg`)//构造函数放入图片
caras.ind()//运行方法

css部分：

如果自己有需要还请自己修改大小、颜色等。

---

ul,
li {
    list-style: none;
}

.banner-box {
    width: 1400px;
    height: 340px;
    border: 2px solid sienna;
    margin: auto;
    overflow: hidden;
    /* 子绝父相 */
    position: relative;
    user-select:none;
    max-width: 969999px;

}

.imgs ul {
    width: 10000px;
    position: absolute;
    /* 过渡 */
    transition: all .5s;
    left: 0;
}

.imgs ul li {
    float: left;
}

.imgs ul li img {
    width: 1400px;
    height: 340px;
}

.dots {
    position: absolute;
    left: 50%;
    bottom: 20px;
    /* 回移一半 */
    /* margin-left: -26px; */
    transform: translateX(-50%);
}

.a-left,
.a-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
    cursor: pointer;
    display: block;
}

.a-left {
    width: 10px;
    height: 10px;
    line-height: 00px;
    left: 80px;
    padding: 50px;
    background-color: rgb(0, 0, 0, .5);
    border-radius: 50%;
    display: none;
    font-size: 16px;
    text-align: center;
}

.a-right {
    width: 10px;
    height: 10px;
    line-height: 00px;
    right: 80px;
    padding: 50px;
    background-color: rgb(0, 0, 0, .5);
    border-radius: 50%;
    display: none;
    font-size: 16px;
    text-align: center;
}

.dots span {
    width: 10px;
    border-radius: 50%;
    /* border: 1px solid #333; */
    background-color: rgb(134, 133, 133);
    height: 10px;
    display: inline-block;
    color: transparent;
    cursor: pointer;
}

.banner-box i{
    color: #fff;
    position: absolute;
    top: 15px;
    left: 35px;
}

html部分:

创建一个class叫se-lb的盒子，js部分自己就插入了。

---

以上是个人的思路，如有不足请指正。