js 实现轮播图，代码少，效果好

1、css 部分

    * {
        margin: 0;
        padding: 0;
    }

    .page {
        width: 100%;
        height: 400px;
        position: relative;
    }

    .page .box {
        width: 100%;
        height: 400px;
    }

    .page .box ul {
        width: 100%;
        height: inherit;
    }

    .page .box ul li {
        width: 100%;
        height: inherit;
        display: none;
        position: absolute;
    }

    .page .box ul li img {
        width: 100%;
        height: 100%;
        background-size: cover;
        position: absolute;
    }

    .box ul li:first-child {
        display: block;
    }

    .page ol {
        margin-top: -30px;
        position: relative;
        z-index: 100;
        width: 100%;
        display: flex;
        justify-content: center;
        list-style: none;
    }

    .page ol li {
        height: 30px;
        width: 30px;
        border-radius: 15px;
        background: #ddd;
        color: #555;
        line-height: 30px;
        text-align: center;
        cursor: pointer;
    }

    .page ol .active {
        background: #2f0da7;
        border: #2f0da7;
        color: #fff;
    }

2、html部分

<div class="page">
    <div class="box">
        <ul id="pic">
            <li><img src="images/1.png"></li>
            <li><img src="images/3.png"></li>
            <li><img src="images/4.png"></li>
        </ul>
    </div>
    <ol id="picindex">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</div>

3、js部分

    const pics = document.getElementById('pic');
    const picLi = document.getElementById('pic').getElementsByTagName("li");
    const list = document.getElementById('picindex');
    const listLi = document.getElementById('picindex').getElementsByTagName('li');
    const timeIntervals = 2000;
    let index = 0;
    let timer = 0;

    pics.onmouseover = () => {
        clearInterval(timer);
    }

    pics.onmouseout = () => {
        timer = setInterval(playPicture, timeIntervals);
    }

    list.onmouseover = (event) => {
        clearInterval(timer);
        const index = event && event.srcElement ? event.srcElement.innerText : 0;
        if (!Number.isNaN(index) && listLi[index]) {
            changePicture(index - 1);
        }

    }

    list.onmouseout = () => {
        timer = setInterval(playPicture, timeIntervals);
    }

    timer = setInterval(playPicture, timeIntervals);

    function playPicture() {
        index++;
        if (index >= picLi.length) {
            index = 0;
        }
        changePicture(index);
    }

    function changePicture(currIndex) {
        for (var i = 0; i < picLi.length; i++) {
            if (listLi[i].className === "active") {
                picLi[i].style.display = "none";
                listLi[i].className = "";
            }
        }
        index = currIndex;
        picLi[currIndex].style.display = "block";
        listLi[currIndex].className = "active";
    }