轮播图

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部分

 1 * {
 2     margin: 0;
 3     padding: 0;
 4 }
 5 
 6 a {
 7     text-decoration: none;
 8 }
 9 
10 #box {
11     margin: 100px auto;
12     width: 600px;
13     height: 400px;
14     position: relative;
15     /* border:2px solid #222; */
16     border-radius: 50%;
17     overflow: hidden;
18 }
19 
20 #list {
21     position: absolute;
22     width: 4200px;
23     height: 100%;
24     z-index: 1;
25 
26 }
27 
28 #list img {
29     width: 600px;
30     height: 400px;
31     float: left;
32 }
33 
34 #controls {
35     position: absolute;
36     z-index: 2;
37     bottom: 8px;
38     width: 100%;
39     text-align: center;
40 }
41 
42 #controls span {
43     width: 20px;
44     height: 20px;
45     border-radius: 50%;
46     background-color: #e3e3e3;
47     display: inline-block;
48     cursor: pointer;
49 }
50 
51 #controls .active {
52     background-color: orange;
53 }
54 
55 .arrow {
56     font-size: 60px;
57     position: absolute;
58     z-index: 2;
59     font-weight: bold;
60     top: 160px;
61     color: #f3f3f3,;
62 }
63 
64 .arrow:hover {
65     color: orange;
66 }
67 
68 #prev {
69     left: 0;
70 }
71 
72 #next {
73     right: 0;
74 }

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>

 

来源：https://www.cnblogs.com/huang-gua123/p/11900582.html