Javascript Slider 在过渡结束时无法正常工作

Question

我不知道为什么人们不回答这个问题。我正在制作一个水平无限循环 slider 。我正在使用的方法是制作一个包含 3 个图像的 ul 容器，例如，如果有 3 个图像，则克隆第一个图像并将其放置到 slider 的末尾，与最后一个图像相同克隆并将其放在第一张图像之前。所以现在总图像是 5。默认 slider 转换总是从第一张图像开始，而不是从克隆图像开​​始。这是一个 example .我面临的是，我想在 slider 到达最后一个克隆图像后重置 slider ，并像旋转木马 slider 一样连续循环。我尝试将 addEventListener 与事件名称 transitionend 一起使用，但该事件未正确执行并显示出不满意的行为。有办法解决这个问题吗？

(function () {
    var resetTranslation = "translate3d(-300px,0px,0px)";
    var elm = document.querySelector('.Working');
    elm.style.transform = resetTranslation;
    var arr = document.querySelectorAll('.Working li');
    var clonefirst,
        clonelast,
        width = 300;
    index = 2;
    clonefirst = arr[0].cloneNode(true);
    clonelast = arr[arr.length - 1].cloneNode(true);

    elm.insertBefore(clonelast, arr[0]);
    arr[arr.length - 1].parentNode.insertBefore(clonefirst, arr[arr.length - 1].nextSibling);
    //Update
    arr = document.querySelectorAll('.Working li');
    elm.style.transition = 'transform 1.5s ease';

    setInterval(function () {

        elm.style.transform = 'translate3d(-' + index * width + 'px,0px,0px)';
        if (index == arr.length - 1) {
            elm.addEventListener('transitionend', function () {
                elm.style.transform = resetTranslation;
            });
            index = 1;
        }
        index++;

    }, 4000)

})();

*{
    box-sizing: border-box;
}
.wrapper{
    position: relative;
    overflow: hidden;
    height: 320px;
    width: 300px;


}

.Working{
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    width: 3125%;


}
.Working li{
    position: relative;
    float: left;
}


img{
    max-width: 100%;
    display: block;
}

.SubContainer:after{
    display: table;
    clear: both;
    content: "";
}

<div class="wrapper">
    <ul class="SubContainer Working">
        <li> <img class="" src="http://i.imgur.com/HqQb9V9.jpg" /></li>
        <li><img class="" src="http://i.imgur.com/PMBBc07.jpg" /></li>
        <li><img  class="" src="http://i.imgur.com/GRrGSxe.jpg" /></li>
    </ul>
</div>

Answer 1

我弄乱了你的代码来修复:https://jsfiddle.net/rap8o3q0/

变化的部分:

var currentItem = 1;

setInterval(function () {
    var getWidth = window.innerWidth;

    if(len === currentItem){
        i = 1;
        currentItem = 1;
    } else {
        currentItem++;
        i++;
    }

    var val = 'translate3d(-' + (i-1) * getWidth + 'px,0px,0px)';
    UnorderedListElement.style.transform = val;

}, 3000);