我正在尝试编写一个滑动div中一组图像的函数,然后在它到达结尾时循环(反之亦然,当向另一个方向移动时)。问题是,它能够经历一次循环,但每当第二个循环出现时就会拧紧。我究竟做错了什么?
HTML:
<img class="slide">
<img class="slide">
<img class="slide">
JavaScript:
var slideNumber = 0;
var totalSlides = $('.slide').length;
$(document).ready(function(){
var animateSlide = function(){
$('.slide').eq(slideNumber).css('z-index', totalSlides);
}
$('.page-right').click(function(){
if(slideNumber < totalSlides){
$('.slide').eq(slideNumber).css('z-index', totalSlides-1);
slideNumber = slideNumber + 1;
return animateSlide();
}
else if(slideNumber === totalSlides) {
$('.slide').eq(slideNumber).css('z-index', totalSlides-1);
slideNumber = 0;
return animateSlide();
}
});
$('.page-left').click(function() {
if (slideNumber < totalSlides) {
$('.slide').eq(slideNumber).css('z-index', totalSlides-1);
slideNumber = slideNumber - 1;
return animateSlide();
}
else if(slideNumber === 0) {
$('.slide').eq(slideNumber).css('z-index', totalSlides-1);
slideNumber = totalSlides;
return animateSlide();
}
});
}
答案 0 :(得分:0)
更简单的方法是使用addClass和removeClass。创建一个名为top slide的css类,用于更改幻灯片的z-index:
.slide{
z-index: 1;
}
.topSlide{
z-index: 2;
}
现在只需将该类添加到下一张幻灯片中,然后从上一张幻灯片中删除该类:
var $slides = $('.slides'),
numSlides = $slides.length;
index = 0;
function nextSlide(){
$slides.eq(index % numSlides).removeClass('top-slide');
$slides.eq(++index % numSlides).addClass('top-slide');
}
不是那个eq索引从0开始,所以用类顶部幻灯片开始你的第一个幻灯片。现在,当您调用nextSlide时,索引将递增。 %(modulo)只是根据幻灯片数检查剩余部分。例如,当index = 3(和numSlides = 3)时,则3%3 = 0,因此它会将第一张幻灯片设置为顶部幻灯片。当index = 4时,则4%3 = 1,因此第二张幻灯片将设置为顶部等...
让我知道这是否有意义!