麻煩與jQuery滑塊

我有困難得到一個滑塊後退按鈕正常工作。滑塊簡單地淡出第一個孩子並將其追加到父代的末尾，沒有什麼特別的。看起來，當後退按鈕被點擊時，它不會消失，第一個孩子會掛起，直到週期結束，我不知道爲什麼。我很感謝這個幫助。麻煩與jQuery滑塊

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

來源

2014-10-08 visevo

你前進按鈕完美的作品，因爲它遵循的所有元素的順序相同。但是當你開始倒退時，因爲你將它們追加到奇數位置，所以元素的順序會混亂。您需要徹底重新設計後退按鈕的工作方式...... – Fizzix 2014-10-08 23:54:34

您的滑塊總是有4個項目嗎？ – Fizzix 2014-10-08 23:55:30

我更喜歡它，但它們是動態添加的 – visevo 2014-10-08 23:59:43

好吧，我真的不知道爲什麼，這一次是如此難以思考的問題。在你的轉發函數中，你使用jquery next（）來選擇下一個兄弟。然而，在你的向後函數中，你用$（this）.last（'div.slide'）選擇你的元素。由於$（this）在其集合中只有一個元素，因此您正在選擇自己。這是因爲jquery last函數不會選擇最後一個同級，而是'選擇最後一個匹配的元素'。爲了得到你想要的淡入淡出的元素，你必須用$（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);

並根據需要將工作。

來源

2014-10-09 16:15:41

麻煩與jQuery滑塊

回答

相關問題