javascript - 无法使该图像 slider 在多个实例中工作

Question

我有这个简单的图像 slider ，它的功能如下所示:

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”。 slider 一开始会很好地工作，然后包含 2 个和 3 个图像的集合将只是空白(所有图像将保持“显示:无”)，直到包含 5 个图像的集合到达最后一个图像，而不是返回到第一个图像他们到达了各自的最后一张图像。

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

Answer 1

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

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

类似这样的事情:

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/