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

Can not make this image slider work in multiple instances

本文关键字：实例 工作 图像      更新时间：2023-09-26

我有一个简单的图像滑动条，它的函数是这样的:

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);

. .问题来了;我有多组图像，那些有class的。手动"有'上一步'和'下一步'按钮。类为auto的是在图像之间自动旋转。

我在每个集合中有不同数量的图像，例如我在3个集合中有2,3,5个图像，类为"。auto"。滑块一开始会工作得很好，然后有2张和3张图像的集合将只是空白(所有图像将保持'display:none')，直到有5张图像的集合到达最后一张图像，而不是在它们到达各自的最后一张图像后回到第一张图像。

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

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

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

像这样:

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/

相关文章：