无法使此图像滑块在多个实例中工作

Question

我有一个简单的图像滑块，它的功能如下：

function slider(pocket, time){      
$(pocket).find('> div:first').addClass('sn');
var nos = $(pocket).find('> div').length;
var timer = null;
    function fadeNext() {
    var currentSlide = $(pocket).find('> div.sn');
    var nextSlide = $(currentSlide).next('div');
    if(nextSlide.length == 0){
        nextSlide = $(pocket).find('> div:first');
    }
        $(currentSlide).removeClass('sn').fadeOut(time);
        $(nextSlide).addClass('sn').fadeIn(time);
    }
    function fadePrev() {
    var currSlide = $(pocket).find('> div.sn');
    var prevSlide = $(currSlide).prev('div');
    if(prevSlide.length == 0){
        prevSlide = $(pocket).find('> div:last');
    }
        $(currSlide).removeClass('sn').fadeOut(time);
        $(prevSlide).addClass('sn').fadeIn(time);
    }
$(pocket).find('.sl_next').on('click',  function() {
    fadeNext();
});
$(pocket).find('.sl_prev').on('click',  function() {
    fadePrev();
});

function startSlide(){
    timer = setInterval(fadeNext, 3999);
}

if(time > 0 && nos > 1){
    startSlide();
}   
}

然后我这样调用函数：

slider('.manual', 0);
slider('.auto', 500);

..这就是问题所在；我有多组图像，具有“.manual”类的图像具有“上一个”和“下一个”按钮。具有“auto”类的那些将在图像之间自动旋转。

我在每组中有不同数量的图像，例如，我在 3 组中有 2、3、5 张图像，类别为“.auto”。滑块一开始会很好用，然后带有 2 和 3 个图像的集合将只是空白（所有图像将保持“显示：无”），直到具有 5 个图像的集合到达最后一个图像，而不是返回到第一个图像之后他们到达各自的最后一张图片。

所以最后只有最大图像集和手动集看起来正常，我想我需要帮助！谢谢！

Answer 1

问题是您在fadeNext() 和fadePrev() 方法中使用了$(pocket)。如果$(pocket) 只选择了一个元素，那效果很好，但如果有多个，那么事情就会出错，因为你在计算所有口袋里的所有divs。

一种可能的解决方案：在fadeNext() 和fadePrev() 方法中，使用each() 函数单独遍历每个“口袋”（您需要更新对口袋内部的所有引用它，并将它们替换为this)。这样，您将只计算该特定口袋中的 divs，而不是计算所有口袋中的所有 divs。

类似这样的：

function slider(pocket, time){      
    $(pocket).find('> div:first').addClass('sn');
    var nos = $(pocket).find('> div').length;
    var timer = null;
    function fadeNext() {
        $(pocket).each(function() {
            var currentSlide = $(this).find('> div.sn');
            var nextSlide = $(currentSlide).next('div');
            if(nextSlide.length == 0){
                nextSlide = $(this).find('> div:first');
            }
            $(currentSlide).removeClass('sn').fadeOut(time);
            $(nextSlide).addClass('sn').fadeIn(time);
        });
    }
    function fadePrev() {
        $(pocket).each(function() {
            var currSlide = $(this).find('> div.sn');
            var prevSlide = $(currSlide).prev('div');
            if(prevSlide.length == 0){
                prevSlide = $(this).find('> div:last');
            }
            $(currSlide).removeClass('sn').fadeOut(time);
            $(prevSlide).addClass('sn').fadeIn(time);
        });
    }
    $(pocket).find('.sl_next').on('click',  function() {
        fadeNext();
    });
    $(pocket).find('.sl_prev').on('click',  function() {
        fadePrev();
    });

    function startSlide(){
        timer = setInterval(fadeNext, 3999);
    }

    if(time > 0 && nos > 1){
        startSlide();
    }   
}

slider('.manual', 0);
slider('.auto', 500);

你可以在这个 JSFiddle 上看到一个工作演示：http://jsfiddle.net/3n0d54t3/1/