Javascript 循环非jQuery动画工作正常,直到循环回到起点
尝试通过一组滑动帧循环一个标题特性 “幻灯片”分区Javascript 循环非jQuery动画工作正常,直到循环回到起点,javascript,velocity.js,Javascript,Velocity.js,尝试通过一组滑动帧循环一个标题特性 “幻灯片”分区 在第二次从#hs1过渡到#hs2之前,一切都很顺利,在Velocity(旧幻灯片,时,我从Velocity中得到TypeError:L未定义,动画和回调不会触发。在脚本的哪一行触发该错误?是Velocity吗(旧幻灯片,line?@CertainPerformance yap!编辑问题以添加…您的幻灯片选择器是[“#hs1”、“#hs2”、“#hs3”],但所提供的代码中未显示任何内容。@CertainPerformance Aha。简化htm
在第二次从#hs1过渡到#hs2之前,一切都很顺利,在
Velocity(旧幻灯片,
时,我从Velocity中得到TypeError:L未定义,动画和回调不会触发。在脚本的哪一行触发该错误?是Velocity吗(旧幻灯片,
line?@CertainPerformance yap!编辑问题以添加…您的幻灯片选择器是[“#hs1”、“#hs2”、“#hs3”]
,但所提供的代码中未显示任何内容。@CertainPerformance Aha。简化html时出错…问题已更新。您的问题必须在实际代码中,而不是在您简化的代码中。
:在此处发布您的实际代码
<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>
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;
}