相关代码：html

<div class="banner" id=banner>
        <ul id="carousel" class="carousel">
            <li><img src="./images/banner/banner01.png" alt=""></li>
            <li><img src="./images/banner/banner02.png" alt=""></li>
            <li><img src="./images/banner/banner03.png" alt=""></li>
        </ul>
        <div class="dot" id="dot">
            <span data-n="0" id='dd' class="dd"></span>
            <span data-n="1" class="dd"></span>
            <span data-n="2" class="dd"></span>
        </div>
        <script src="JS/carousel.js"></script>
        </div>
    </div>

相关代码：css

/* banner */
.banner {
    position: relative;
    overflow: hidden;
}

.banner .carousel {
    width: 400%;
    min-width: 1155px;
    overflow: hidden;
    /* transform: translateX(-50%); */
    /* position: relative; */

}

.banner .carousel li {
    float: left;
    width: 25%;
}

.banner .carousel li img {
    width: 100%;
}

.banner .dot {
    position: absolute;
    top: 450px;
    left: 50%;
    cursor: pointer;
    /* background-color: red; */
    /* margin-right: 2px; */
}

.banner .dot span {
    width: 10px;
    height: 10px;
    display: inline-block;
    background-color: #fff;
    border-radius: 50%;
}

.banner .dot .dd {
    background-color: #0058AA;
}

相关代码：js

(function () {
    var carousel = document.getElementById('carousel');
    var banner = document.getElementById('banner');
    var dot = document.getElementById('dot');
    // var dd = document.getElementById('dd');
    // var bo = document.getElementById('bo');
    var spans = document.getElementsByTagName('span');
    // 克隆第一张图片
    var clone_li = carousel.firstElementChild.cloneNode(true);
    // 上树
    carousel.appendChild(clone_li);

    var idx = 0;
    var timer;
    // 节流锁
    var lock = true;
    // 封装函数
    function car() {
        // 检查锁的状态
        if (!lock) return;
        // 关锁
        lock = false;

        idx++;
        // 加上过渡
        carousel.style.transition = 'transform .5s ease 0s';
        // 拉动图片
        carousel.style.transform = "translateX(" + -25 * idx + "%)";
        if (idx > 3) {
            idx = 0;
            carousel.style.transition = "none";
            carousel.style.transform = 'none';
        }
        set();
        // 开锁，动画结束之后开锁
        setTimeout(function () {
            lock = true;
        }, 2000);


    }
    // 定时器
    timer = setInterval(car, 2000);

    // 鼠标进入，自动轮播暂停
    banner.onmouseenter = function () {
        clearInterval(timer);
    }

    // 鼠标离开，自动轮播开始
    banner.onmouseleave = function () {
        // 设表先关
        clearInterval(timer);
        // 设置定时器，这里不要加var，加var就变为局部变量了，就clear不掉了！
        timer = setInterval(car, 1000);
    }

    function set(){
           for(var i=0;i<=2;i++){
               if(i==idx){
                   dot[i].className='dd';
               }else{
                dot[i].className='';
               }
           }
    }
})();

问题描述：

我跟着视频写了，实在实现不了，

问题描述：

还有就是轮播图从克隆那一张到第一张图片，然后轮播到第二张图片的时候不顺畅，本来两秒一帧，变成了4秒才轮播。