Javascript Slider无法正常使用转换结束

Question

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

(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

您的transition end事件不会立即触发，因为最后一个克隆图像出现时不会计算最后一个转换。您可以通过使用函数轻松实现此目的setTimeout，并传递等待的毫秒数，然后重置翻译。我不知道这是一个有效的解决方案，但我认为使用此功能可以轻松完成。现在我正在用这个修复你的代码。

(function () {
    var elm = document.querySelector('.Working');
    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');

     setInterval(function () {
        $(elm).css({
            'transform': 'translate3d(-' + (index * width) + 'px,0px,0px)',
            'transition': 'transform 1.5s ease'
        });
        if (index == arr.length - 1) {
            setTimeout(function () {
                $(elm).css({'transform': 'translate3d(-300px,0px,0px)', 'transition': 'none'});
                index = 1;
            }, 1400);

        }
        index++;

    }, 2000)

})();

* {
    box-sizing: border-box;
}

.wrapper {
    position: relative;
    overflow: hidden;
    height: 320px;
    width: 300px;
    margin-top: 8px;

}

.Working {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    transform: translateX(-300px);
    width: 3125%;

}

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

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

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

#checkboxer:checked + .wrapper {
    overflow: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="checkboxer">Remove Overflow Hidden</label>
<input type="checkbox" id="checkboxer" name="checkboxer"/>

<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>