轮播图源码

<div class='wrap' id='content'>
        <ul class='list'>
            <li class='item active'>0</li>
            <li class='item'>1</li>
            <li class='item'>2</li>
            <li class='item'>3</li>
            <li class='item'>4</li>
        </ul>
        <ul class='pointList'>
            <li class="point active" data-index='0'></li>
            <li class="point" data-index='1'></li>
            <li class="point" data-index='2'></li>
            <li class="point" data-index='3'></li>
            <li class="point" data-index='4'></li>

        </ul>
        <button type='button' class='btn' id='goPre'>
            < </button>
                <button type='button' class='btn' id='goNext'>></button>
    </div>

<style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 400px;
            height: 200px;
            position: relative
        }

        .list {
            width: 400px;
            height: 200px;
            list-style: none;
            position: relative;
        }

        .item {
            position: absolute;
            width: 100%;
            height: 100%;
            color: white;
            font-size: 30px;
            opacity: 0;
            transition: all .8s;
        }

        .item:nth-child(1) {
            background-color: wheat;
        }

        .item:nth-child(2) {
            background-color: yellow;
        }

        .item:nth-child(3) {
            background-color: pink;
        }

        .item:nth-child(4) {
            background-color: green;
        }

        .item:nth-child(5) {
            background-color: goldenrod;
        }

        .btn {
            width: 30px;
            height: 60px;
            position: absolute;
            top: 65px;
            border: none;
            font-size: large;
            -webkit-transition-duration: 0.4s;
            /* Safari */
            transition-duration: 0.4s;
            border: 2px solid #e7e7e7;
            z-index: 100;
        }

        .btn:hover {
            background-color: grey;
            color: white;
        }

        #goPre {
            left: 0;
        }

        #goNext {
            right: 0px;
        }

        /* 原理谁的active高,谁就显示在前面 */
        .item.active {
            opacity: 1;
            z-index: 10
        }

        .pointList {
            padding-left: 0;
            list-style: none;
            position: absolute;
            right: 20px;
            bottom: 20px;
            z-index: 100;
        }

        .point {
            width: 8px;
            height: 8px;
            background-color: rgba(0, 0, 0, 0.4);
            border-radius: 100%;
            float: left;
            margin-right: 12px;
            border-style: solid;
            border-width: 1.5px;
            border-color: whitesmoke;
            cursor: pointer;
            /* 设置小手指 */
        }

        .point.active {
            background-color: whitesmoke;
        }
    </style>

<script type='text/javascript'>
        var items = document.getElementsByClassName('item');
        var points = document.getElementsByClassName('point');
        var content = document.getElementById('content')
        var goPreBtn = document.getElementById('goPre')
        var goNextBtn = document.getElementById('goNext')
        let timer;
        var time = 0;//计时器定时跳转参数

        var index = 0;//index表示第几张图片 --->第index张图片有active这个类
        //同时展示第几个点

        var clearActive = function () {
            for (var i = 0; i < items.length; i++) {
                items[i].className = 'item'
                points[i].className = 'point'
            }
        }

        var goIndex = function () {
            clearActive()//在选定新的图片时，先清除之前的
            items[index].className = 'item active'//修改类名
            points[index].className = 'point active'
        }

        goNext = function () {
            if (index == 4) {
                index = 0
            } else { index++; }
            goIndex();
        }
        goPre = function () {
            if (index == 0) {
                index = 4
            } else { index--; }
            goIndex();
        }

        //点击箭头转换页面
        goNextBtn.addEventListener('click', function () {
            goNext();
            time = 0;
        })
        goPreBtn.addEventListener('click', function () {
            goPre();
            time = 0;
        })

        //点击小圆点跳转页面
        for (var i = 0; i < points.length; i++) {
            points[i].addEventListener('click', function () {
                var pointIndex = this.getAttribute('data-index');
                index = pointIndex;
                goIndex();
                time = 0;
            })
        }

        //自动转换页面
        function setTime() {
            timer = setInterval(function () {
                time++;
                if (time == 20) {
                    goNext();
                    time = 0
                }
                goNext();
            }, 2000)
            return timer;
        }
        setTime();

        //鼠标移入暂停自动轮播
        content.addEventListener('mouseover', function () {
            console.log('鼠标移入');
            clearTimeout(timer);
        })
        //鼠标移出恢复自动轮播
        content.addEventListener('mouseout', function () {
            console.log('鼠标移出');
            setTime();
        })


    </script>