Question

我有这个简单的下一个和上一个函数，我写了但是我有一个简单的问题。在最后一个滑块上单击“下一步”，它会显示一个空白滑块，然后单击“下一步”，它将按原样重新开始。我错过了什么？下面是jquery代码;

 $('div.contsliders').each(function(e) {
    if (e != 0)
        $(this).hide();
   });

$('span.next').click(function(){
    if ($('div.contsliders:visible').next().length != 0)
        $('div.contsliders:visible').next().fadeIn(1000).prev().hide();

    else {
        $('div.contsliders:visible').hide();
        $('div.contsliders:first').fadeIn(1000);
    }
    return false;
});

$('span.prev').click(function(){
    if ($('div.contsliders:visible').prev().length != 0)
        $('div.contsliders:visible').prev().fadeIn(1000).next().hide();
    else {
        $('div.contsliders:visible').hide();
        $('div.contsliders:last').fadeIn(1000);
    }
    return false;
});

HERE IS THE JSFIDDLE LINK

我非常感谢伙伴，谢谢。

Answer 1

那是因为当它检查div的以下条件时你认为它是最后一个使用$('div.contsliders:visible').next().length给出.contsnextprev（因此假设长度仍然是1而不是0）所以它显示一个而不是移动到开头，当你再次点击它时会发生这种情况。这是因为.contsnextprev是最后一张幻灯片#five旁边的div。

if ($('div.contsliders:visible').next().length != 0)
    $('div.contsliders:visible').next().fadeIn(1000).prev().hide();

您可以将其更改为：

    var $nxt = $('div.contsliders:visible').next('.contsliders');
    if ($nxt.length != 0)
        $nxt.fadeIn(1000).prev().hide();

<强> Demo

事实上，您可以将其简化为一个处理程序：

$('div.contsliders:gt(0)').hide(); //Hide all but the first one

var $allSlides = $('div.contsliders'), 
    traverseDefault = "first", //set the defaults
    actionDefault ="next";

$('span.next, span.prev').click(function(){

    var traverse = traverseDefault,
        action = actionDefault;

    if($(this).is('.prev')){ //if action is prev
        traverse = "last"; //set traverse to last in case nothing is available
        action = "prev"; //set action to prev
    }

    var $curr = $allSlides.filter(':visible'), //get the visible slide
        $nxtTarget =  $curr[action](".contsliders"); //get the next target based on the action.

    $curr.stop(true, true).fadeIn(1000).hide(); //hide current one

    if (!$nxtTarget.length){ //if no next
        $nxtTarget = $allSlides[traverse](); //based on traverse pick the next one
    }

    $nxtTarget.stop(true, true).fadeIn(1000); //show the target

});

<强> Demo

Jquery Next和Prev Button Loop功能

1 个答案: