我尝试使用javascript为英雄标题制作一个小幻灯片。 它应该向上滑动到最后一张图像,然后向相反方向滑回。 它有效,但只有三个持续时间的数字完全相同。
有人知道为什么或我可以改变什么?
$(document).ready(function(){
var slider = $("#hero-slider");
var slides = slider.find(".hero-slides");
var sliderWidth = $("#hero-slider").width();
var slideCount = $(".hero-slide").length;
var currentSlide = 1;
setInterval(function() {
if(currentSlide === 1){
slides.animate({
"margin-left": "-=" + sliderWidth
}, 2000, function(){
currentSlide++;
});
} else if(currentSlide === slideCount) {
slides.animate({
"margin-left": "+=" + sliderWidth
}, 2000, function(){
currentSlide--;
});
};
}, 2000);
});
-
<div id="hero-slider">
<ul class="hero-slides">
<li class="hero-slide"><img src="img/slide-1.jpg"></li>
<li class="hero-slide"><img src="img/slide-2.jpg"></li>
<li class="hero-slide"><img src="img/slide-3.jpg"></li>
</ul>
</div>