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”的图像有'previous'和'next'按钮。具有“auto”类的那些是在图像之间自动旋转。

我在每组中都有不同数量的图像，例如我在3组中有2个，3个，5个图像，类别为“.auto”。滑块在开始时效果很好，然后具有2和3个图像的设置将是空白的（所有图像将保持'显示：无'），直到具有5个图像的设置到达最后一个图像，而不是在返回到第一个图像之后他们达到了各自的最后形象。

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

Answer 1

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

一种可能的解决方案：在fadeNext()和fadePrev()方法中，遍历每个＆＃34;口袋＆＃34;单独使用each()函数（您需要更新其中所有对口袋的引用，并将其替换为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/

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

1 个答案: