麻烦jQuery Slider

Question

我很难让滑块后退按钮正常工作。 滑块简单地淡出第一个子节点并将其附加到其父节点的末尾，没有什么特别之处。 似乎当单击后退按钮时它不会消失，并且第一个孩子挂起直到周期完成，我不知道为什么。我很感激这个帮助。

jsfiddle：http://jsfiddle.net/853mtc1s/

setInterval(function() {
    $(slider_wrapper_id + ' :first').fadeOut('fast',function() {
        $(this).next('div.slide').fadeIn().end().appendTo(slider_wrapper_id);
    });

},4000);
$('.slider-control-forward').on('click', function(){
    $(slider_wrapper_id + ' :first').fadeOut('fast', function(){
        $(this).next('div.slide').fadeIn().end().appendTo(slider_wrapper_id);
    });
});
$('.slider-control-back').on('click', function(){
    $(slider_wrapper_id + ' :first').fadeOut('fast', function(){
        $(this).last('div.slide').fadeIn().end().appendTo(slider_wrapper_id);
    });
});

Answer 1

好的，我不确定为什么这么难以思考。在前向函数中，使用jquery next（）选择下一个兄弟。但是，在你的向后函数中，你用$（this）.last（'div.slide'）选择你的元素。由于$（this）在其集合中只有一个元素，因此您选择自己。这是因为jquery last函数不会选择最后一个兄弟，而是“选择最后一个匹配的元素”。要获得fadeIn所需的元素，必须使用$（this）.siblings（）。last（）选择它。下一个错误是调用end（）。appendTo（）。这将使您的元素无序。你不想要end（），因为你要移动的元素与你刚刚消失的元素相同（不同于你要移动的元素的前向操作是你刚刚消失的元素的前一个兄弟）。因此，要将刚刚淡入的元素移动到队列的前面，请不要使用end（）将其添加到前面。在你的后退功能中，改变：

$(this).last('div.slide').fadeIn().end().appendTo(slider_wrapper_id);

为：

$(this).siblings().last().fadeIn().prependTo(slider_wrapper_id);

它将按预期工作。