循环非jQuery动画工作正常，直到循环回到起始点

Question

尝试循环一组滑动帧以获取标题功能。

＆＃34;幻灯片＆＃34;的div ...

<div class = "homeSlideHolder">
    <div class = "slide" id = "hs1" style="left: 0px;">
        <img src="img1.jpg">
    </div>
    <div class = "slide" id = "hs2" style="left: 0px;">
        <img src="img2.jpg">
    </div>
    <div class = "slide" id = "hs3" style="left: 0px;">
        <img src="img3.jpg">
    </div>
</div>

...通过向左滑动每个（n）秒并将z-index重新分配给新旧幻灯片来轮流观察能见度。

    function aniInit(){
        var slides = ["#hs1", "#hs2", "#hs3"];

        setTimeout(function(){aniInst(slides[0], slides)}, 6300);
    } 

    function aniInst(oldSlideID, slides){
        var oldSlide = document.querySelectorAll(oldSlideID);

        var nextSlideID = nextPrep(oldSlideID, slides);
        var nextSlide = document.querySelectorAll(nextSlideID);

        Velocity(oldSlide, {left: "-100%"}, 1000, function(){
            //give old slide a z-index of 0 and reset style.left 
            oldSlide[0].classList.add("SZIZero");
            oldSlide[0].classList.remove("SZIMax");
            oldSlide[0].style.left = 0; 
            //give next slide a z-index of 2
            nextSlide[0].classList.add("SZIMax");
            nextSlide[0].classList.remove("SZINext");
            setTimeout(function(){aniInst(nextSlideID, slides)}, 6300);
        });
    }

    function nextPrep(oldSlideID, slides){

        if (typeof slides[slides.indexOf(oldSlideID)+1] === "undefined"){
            var nextSlideID = slides[0];
        } else {
            var nextSlideID = slides[slides.indexOf(oldSlideID)+1];
        }

        var nextSlide = document.querySelectorAll(nextSlideID);
        //apply z-index of 1 to make sure next slide
        // is visible as the old one above it slides away
        nextSlide[0].classList.add("SZINext"); 
        nextSlide[0].classList.remove("SZIZero");

        return nextSlideID;
    }

事情进展顺利，直到＃hs1第二次转换到＃hs2，Velocity(oldSlide,...当我从Velocity获得TypeError: L is undefined时，动画和回调都不会被激活。< / p>