可复用轮播图方法

HTML部分

<div class="banner">
        <!-- 承载所有 li 的 图片大盒子 -->
        <ul class="imgBox">
            <li style="background-color: skyblue;">1</li>
            <li style="background-color: orange;">2</li>
            <li style="background-color: purple;">3</li>
            <li style="background-color: green;">4</li>
            <li style="background-color: pink;">5</li>
        </ul>

        <!-- 承载所有焦点的 焦点大盒子 -->
        <ol class="pointBox"></ol>

        <!-- 左右切换的按钮 -->
        <div class="left">&lt;</div>
        <div class="right">&gt;</div>
    </div>

css部分

        * {
            margin: 0;
            padding: 0;
        }
        
        .banner {
            width: 600px;
            height: 400px;
            border: 2px solid #333;
            border-radius: 10px;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }
        
        .banner>.imgBox {
            width: 500%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            display: flex;
        }
        
        .banner>.imgBox>li {
            flex: 1;
            height: 100%;
            border-radius: 10px;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 100px;
            font-weight: 700;
        }
        
        .banner>.pointBox {
            width: 200px;
            height: 30px;
            background-color: rgba(255, 255, 255, .5);
            position: absolute;
            left: 50%;
            bottom: 30px;
            transform: translateX(-50%);
            border-radius: 15px;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }
        
        .banner>.pointBox>li {
            width: 20px;
            height: 20px;
            background-color: #fff;
            border-radius: 50%;
            list-style: none;
            cursor: pointer;
        }
        
        .banner>.pointBox>li.active {
            background-color: red;
        }
        
        .banner>div {
            width: 30px;
            height: 50px;
            background-color: rgba(255, 255, 255, .3);
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            display: none;
            justify-content: center;
            align-items: center;
            font-size: 22px;
            color: #333;
            cursor: pointer;
        }
        
        .banner:hover>div {
            display: flex;
        }
        
        .banner>.left {
            left: 0;
            border-radius: 0 30px 30px 0;
        }
        
        .banner>.right {
            right: 0;
            border-radius: 30px 0 0 30px;
        }
        
        .banner>div:hover {
            background-color: rgba(255, 255, 255, .5);
        }

JavaScript部分

class Swiper{
    // 传入的三个参数 最外层的大盒子 图片所在的ul 焦点所在的ol
    constructor(banner, imgs = 'ul', btns = 'ol') {
        this.banner = document.querySelector(banner);
        this.imgBox = this.banner.querySelector(imgs);
        this.pointBox = this.banner.querySelector(btns);
        this.index = 1;
        this.banner_width = parseInt(window.getComputedStyle(this.banner).width);
        this.timer = null;
        this.flag = true;
    }
    copy() {
        let first = this.imgBox.firstElementChild.cloneNode(true);
        let last = this.imgBox.lastElementChild.cloneNode(true);
        this.imgBox.appendChild(first);
        this.imgBox.insertBefore(last, this.imgBox.children[0]);
        this.imgBox.style.width = this.imgBox.children.length * 100 + '%';
        this.imgBox.style.left = -this.index * this.banner_width + 'px';
    }
    setpoint() {
        for (let i = 0; i < this.imgBox.children.length - 2; i++) {
            let li = document.createElement('li');
            li.classList.add('item');
            li.dataset.id = i;
            this.pointBox.appendChild(li);
            if (i == 0) li.classList.add('active');
        }
    }

    animation(ele, obj) {
        for (let k in obj) {
            let type = k;
            let target = obj[k];
            if (type == 'opacity') target *= 100;
            let timere = setInterval(() => {
                    let init;
                    if (type == 'opacity') {
                        init = window.getComputedStyle(ele)[type] * 100;
                    } else {
                        init = parseInt(window.getComputedStyle(ele)[type]);
                    }
                    let duration = (target - init) / 10;
                    duration = duration >= 0 ? Math.ceil(duration) : Math.floor(duration);
                    if (init == target) {
                        clearInterval(timere);
                        this.movend();
                    } else {
                        if (type == 'opacity') {
                            ele.style[type] = (duration + init) / 100;
                        } else {
                            ele.style[type] = duration + init + 'px';
                        }
                    }
                },
                20)
        }
    }

    autoplay() {
        this.timer = setInterval(() => {
            this.index++;
            this.animation(this.imgBox, { left: -this.index * this.banner_width });
        }, 3000)
    }

    movend() {
        if (this.index == this.imgBox.children.length - 1) {
            this.index = 1;
            this.imgBox.style.left = -this.index * this.banner_width + 'px';
        }
        if (this.index == 0) {
            this.index = this.imgBox.children.length - 2;
            this.imgBox.style.left = -this.index * this.banner_width + 'px';
        }

        for (let i = 0; i < this.pointBox.children.length; i++) {
            this.pointBox.children[i].classList.remove('active');
        }
        this.pointBox.children[this.index - 1].classList.add('active');
        this.flag = true;
    }

    over_out() {
        this.banner.addEventListener('mouseover', () => {
            clearInterval(this.timer);
        })
        this.banner.addEventListener('mouseout', () => {
            this.autoplay();
        })
    }

    left_right_focus() {
        this.banner.addEventListener('click', (e) => {
            if (e.target.className == 'left') {
                if (this.flag == false) return;
                this.flag = false;
                this.index--;
                this.animation(this.imgBox, { left: -this.index * this.banner_width });
            }
            if (e.target.className == 'right') {
                if (this.flag == false) return;
                this.flag = false;
                this.index++;
                this.animation(this.imgBox, { left: -this.index * this.banner_width });
            }
            if (e.target.className == 'item') {
                if (this.flag == false) return;
                this.flag = false;
                let id = parseInt(e.target.dataset.id) + 1;
                this.index = id;
                this.animation(this.imgBox, { left: -this.index * this.banner_width });
            }
        })
    }

    changepage() {
        document.addEventListener('visibilitychange', () => {
            if (document.visibilityState == "hidden") {
                clearInterval(this.timer);
            } else {
                this.autoplay();
            }
        })
    }

    all() {
        this.copy();
        this.setpoint();
        this.animation();
        this.autoplay();
        this.movend();
        this.over_out();
        this.left_right_focus();
        this.changepage();
    }
}
// 把方法封装到对象里面 提高代码可复用性

let obj = new Swiper('第一个参数为外层最大的盒子','第二个参数为图片所在的列表 默认值ul','第三个参数为焦点所在的列表 默认值为ol');

把函数方法封装到对象里面 增加了代码的复用性

详细可见