实现轮播图效果 纯CSS + JS

    div {
        margin-top: 200px;
        margin-left: 300px;
        width: 200px;
        height: 200px;
        border: 2px solid gold;
        overflow:hidden;
    }
    ul {
        width: 1000px;
        height: 200px;
    }
    li {
        list-style: none;
        float: left;
    }
    img {
        width: 200px;
        height: 200px;
    }
    @keyframes move {
            0% {
                transform: translate(0px);
            }
            100% {
                transform: translateX(-1000px);
            }
        }
         li {
            list-style: none;
            float: left;
            animation: move 5s linear infinite;
        }

        <div>
            <ul>
                <li><img src="img/1.png"></li>
                <li><img src="img/2.png"></li>
                <li><img src="img/3.png"></li>
                <li><img src="img/4.png"></li>
                <li><img src="img/5.png"></li>
            </ul>
        </div>

效果展示

2.使用js

        <div>
                <img class="img-slide" src="img/1.png">
                <img class="img-slide" src="img/2.png">
                <img class="img-slide" src="img/3.png">
                <img class="img-slide" src="img/4.png">
                <img class="img-slide" src="img/5.png">
        </div>

        // index：索引， len：长度
        var index = 0, len;
        // 类似获取一个元素数组
        var imgBox = document.getElementsByClassName("img-slide");
        len = imgBox.length;
        imgBox[index].style.display = 'block';
        // 逻辑控制函数
        function slideShow() {
            index ++;
            // 防止数组溢出
            if(index >= len) index = 0;
            // 遍历每一个元素
            for(var i=0; i<len; i++) {
                imgBox[i].style.display = 'none';
            }
            // 每次只有一张图片显示
            imgBox[index].style.display = 'block';
        }
        
        // 定时器，间隔3s切换图片
        setInterval(slideShow, 1000);
        

    div {
        border-top: 5px solid cadetblue;
        /* 避免因窗口变化影响图片效果 */
        width: 60%;
        height: 40%;
        margin: 0 auto; 
    }
    img {
        width: 60%;
        height: 40%;
        margin: 0 auto;
        display: none;
    }