Question

我正在尝试编写一个滑动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(); 


      }

    });
}

Answer 1

更简单的方法是使用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，因此第二张幻灯片将设置为顶部等...

让我知道这是否有意义！

幻灯片功能循环一次然后失败

1 个答案: