轮播图跳到第一个后，点击最后一个小圆点之后就没有过渡动画了

相关代码：

<!-- banner轮播图区 -->

        <div class="banner center" id="banner">

            <ul class="carousel" id="carousel">

                <li><img src="images/banner01.png" alt=""></li>

                <li><img src="images/banner02.png" alt=""></li>

                <li><img src="images/banner03.png" alt=""></li>

            </ul>

            <ol class="banner-dian" id="bannerDian">

                <li data-n="0" class="bgc01"></li>

                <li data-n="1"></li>

                <li data-n="2"></li>

            </ol>

        </div>

.site-head .banner {

    width: 100%;

    min-width: 1920px;

    height: 100%;

    min-height: 650px;

    overflow: hidden;

    position: relative;

}

.site-head .banner .carousel {

    width: 400%;

    height: 100%;

    min-height: 650px;

    position: absolute;

    transition: transform 0.5s ease 0s;

    /* 此时要用transform:translateX()

    而不能用left */

    /* transform: translateX(-50%); */

    overflow: hidden;

}

.site-head .banner .carousel li img {

    width: 100%;

    height: 100%;

    min-height: 650px;

}

.site-head .banner .carousel li {

    width: 25%;

    float: left;

}

.site-head .banner .carousel li img {

    width: 100%;

    vertical-align: middle;

}

.site-head .banner .banner-dian {

    width: 42px;

    height: 10px;

    position: absolute;

    margin-left: 50%;

    left: -21px;

    bottom: 50px;

    overflow: hidden;

}

.site-head .banner .banner-dian li {

    width: 10px;

    height: 10px;

    margin-right: 6px;

    border-radius: 50%;

    float: left;

    background-color: #FFFFFF;

    transition: background-color 0.3s ease 0s;

    /* 鼠标指针变为小手状 */

    cursor: pointer;

}

.site-head .banner .banner-dian li:last-child {

    width: 10px;

    height: 10px;

    margin-right: 0px;

}

​

(function() {

    //得到元素

    var banner = document.getElementById("banner");

    var carousel = document.getElementById("carousel");

    //得到小圆点数组

    var dian = document.getElementById("bannerDian");

    var dian_list = dian.getElementsByTagName("li");

    //克隆的一个li

    var clone_li = carousel.firstElementChild.cloneNode(true);

    //上树

    carousel.appendChild(clone_li);

    var idx = 0;

    var timer;

    var lock = true;

    //实现轮播图自动滚动

    function car() {

        carousel.style.transition = "transform 0.5s ease 0s";

        idx++;

        carousel.style.transform = "translateX(" + (-25 * idx) + "%)";

        if (idx > 2) {

            setTimeout(function() {

                carousel.style.transition = "none"

                carousel.style.transform = "none";

                idx = 0;

            }, 500);

        }

        setDian();

    };

    //实现点击小圆点滚动轮播图

    dian.onclick = function(e) {

        if (!lock) {

            return;

        }

        lock = false;

        if (e.target.tagName.toLowerCase() == "li") {

            // alert(e.target.getAttribute("data-n"));

            idx = Number(e.target.getAttribute("data-n"));

            carousel.style.transform = "translateX(" + (-25 * idx) + "%)";

            setDian();

        }

        setTimeout(function() {

            lock = true;

        }, 500);

    }

    timer = setInterval(car, 2500);

    //进入轮播停止

    banner.onmouseenter = function() {

        clearInterval(timer);

    };

    //离开轮播开始

    banner.onmouseleave = function() {

        clearInterval(timer);

        timer = setInterval(car, 2500);

    };

    function setDian() {

        for (var i = 0; i < dian_list.length; i++) {

            if (i == idx % 3) {

                dian_list[i].className = "bgc01";

            } else {

                dian_list[i].className = "";

            }

        }

    };

})();