轮播图

js部分

//插件 先引入  实例化 调用init()初始化  传入父元素
class lunbo {
    constructor() {
        this.index = 1
        this.tim = null
        this.animated=false
        lunbo.liang()

    }
    // 页面布局
    static liang() {
        let box = ' <div id="box"><div id="list" style="left: -600px;">11111<img src="5.jpg"><img src="1.jpg"><img src="2.jpg"><img src="3.jpg"><img src="4.jpg"><img src="5.jpg"><img src="1.jpg"></div><div id="controls"><span data-index="1" class="active"></span><span data-index="2"></span><span data-index="3"></span><span data-index="4"></span><span data-index="5"></span></div><a href="javascript:;" id="prev" class="arrow"> &lt; </a><a href="javascript:;" id="next" class="arrow"> &gt; </a></div>'
        lunbo.$('aa').innerHTML = box
    }
    // 获取id方法
    static $(id) {
        return document.getElementById(id);
    }
    //初始化
    init() {
        // this.buju()
        this.play()

        let this_ = this
        //鼠标移如
        lunbo.$('box').onmouseover = function () {
            this_.stop()
        }
        //鼠标移出
        lunbo.$('box').onmouseout = function () {
            this_.play()
            // this_.anniu()
        }
        //左遍
        lunbo.$('prev').onclick = function () {
            this_.stop()
            this_.nextClick()
            this_.anniu()
        }
        // 右边
        lunbo.$('next').onclick = function () {
            this_.stop()
            this_.prevClick()
            this_.anniu()
        }
        // this.anniu()
    }


    //移动的方法
    move(dom, offset) {
        // console.log(this.animated)
        this.animated=true
        let this_=this
        var iTarget = parseInt(dom.style.left) + offset;
        //移动的时间
        var time = 300
        //间隔时间
        var interval = 10
        // 速度
        var speed = offset / (time / interval)
        console.log(speed)
        function go() {
            // console.log(222)
            if ((speed > 0 && parseInt(dom.style.left) < iTarget) || (speed < 0 && parseInt(dom.style.left) > iTarget)) { // 动画没有完成
            // console.log(iTarget)
                dom.style.left = parseInt(dom.style.left) + speed + 'px';
                setTimeout(go, interval);
            } else {
                // 动画完成
                dom.style.left = iTarget + 'px';
                if (iTarget > -600) {
                    dom.style.left = '-3000px';
                }
                if (iTarget < -3000) {
                    dom.style.left = '-600px';
                }
                
                this_.animated=false
                console.log( this_.animated)
            }
        }
        go()
    }

    // 左边
    nextClick() {
        if (this.animated) {
            return
        }

        if (this.index == 5) {
            this.index = 1
        } else {
            this.index++
        }
        this.move(list, -600)
    }

    //右边
    prevClick() {
        if (this.animated) {
            return
        }
        if (this.index == 1) {
            this.index = 5
        } else {
            this.index--
        }
        this.move(list, 600)
    }

    // 开始
    play() {
        this.tim = setInterval(() => {
            console.log(this)
            this.nextClick()
            this.anniu()
        }, 2000)
    }

    //停止
    stop() {
        clearInterval(this.tim)
    }

    // 重置按钮
    fn(index) {

        var spans = lunbo.$('controls').children;
        for (let i = 0; i < spans.length; i++) {
            spans[i].className = ''
        }
        spans[index - 1].className = 'active'
    }
    // 按钮
    anniu() {
        var spans = lunbo.$('controls').children;
        this.fn(this.index)
        let this_ = this
        for (let i = 0; i < spans.length; i++) {
            spans[i].onclick = function () {
                if(this.className=='active'){
                    return;
                }
                // console.log(this.className)
                let indexs = this.dataset['index']
                let offset = -600 * (indexs - this_.index)
                this_.move(list, offset)
                this_.index = indexs
                this_.fn(this_.index)

            }
        }
    }
}

css部分

* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

#box {
    margin: 100px auto;
    width: 600px;
    height: 400px;
    position: relative;
    /* border:2px solid #222; */
    border-radius: 50%;
    overflow: hidden;
}

#list {
    position: absolute;
    width: 4200px;
    height: 100%;
    z-index: 1;

}

#list img {
    width: 600px;
    height: 400px;
    float: left;
}

#controls {
    position: absolute;
    z-index: 2;
    bottom: 8px;
    width: 100%;
    text-align: center;
}

#controls span {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #e3e3e3;
    display: inline-block;
    cursor: pointer;
}

#controls .active {
    background-color: orange;
}

.arrow {
    font-size: 60px;
    position: absolute;
    z-index: 2;
    font-weight: bold;
    top: 160px;
    color: #f3f3f3,;
}

.arrow:hover {
    color: orange;
}

#prev {
    left: 0;
}

#next {
    right: 0;
}

html部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<link rel="stylesheet" href="css.css">
<body>
    <div id="aa"></div>
</body>
<script src="lunbo.js"></script>
<script>
    window.onload = function () {
        let a = new lunbo()
        a.init(document.getElementById('aa'))
    }


</script>

</html>