jQuery FadeIn/FadeOut DOM元素滑塊

Question

我期待創建一個定製滑塊並需要一些幫助。理論上講，它應該比較簡單。我讓它看起來難以置信。

我創建了兩個按鈕 - 一個＃prev-btn和一個＃next-btn，我希望他們在DOM元素的三個「幻燈片」之間切換。目前你會尖叫我使用幻燈片插件。但問題是這些實際上並不是幻燈片，實際上是分散在頁面周圍的DOM元素，我想通過淡入淡出來打開/關閉頁面。

我已經給每個DOM元素我想展示一個名爲類「首先」，「第二個」和「第三個」來與‘相’我希望他們能在顯示對應。

<div id="1" class="first"></div> 
<div id="2" class="second"></div> 
<div id="3" class="third"></div> 

.second, .third {display: none;} 

顯然，當顯示.first對象時，＃prev-btn應該淡出.first對象和fadeIn .third類。另外，當第一個對象可見時，＃next-btn應該淡出.first對象並顯示.second類。你明白了。這是我正在努力的一點。

我已經有了一個addClass和removeClass小提琴，但我似乎無法想出一個優雅的解決方案，而不必重複每個類添加到＃prev-btn和＃next-btn的點擊功能。我們都知道這是荒謬的（下面的代碼很費勁）。

$j("#prev-btn.first").click(function(){ 
    $j("#prev-btn").addClass('third').removeClass('first'); 
    $j("#next-btn").addClass('third').removeClass('first'); 
    $j(".first").fadeOut(500, function(){ 
     $j(".third").fadeIn(500); 
    }); 
}); 
$j("#next-btn.first").click(function(){ 
    $j("#prev-btn").addClass('second').removeClass('first'); 
    $j("#next-btn").addClass('second').removeClass('first'); 
    $j(".first").fadeOut(500, function(){ 
     $j(".second").fadeIn(500); 
    }); 
}); 

所以，你可以從廢話說，我還沒有在jQuery的最亮的火花，不能做聰明的東西，只是還沒有，所以提前歡呼的幫助！如果任何人都可以實現一個autoslide計時器，那麼哇 - 哇。但它不是100％必要的。乾杯!

Answer 1

elem = ['first', 'second', 'third']; 
var current = 0, previous = 0, n_elem = elem.length; 
function change() { 
    $j("." + elem[previous]).fadeOut(500, function(){ 
     $j("."+elem[current]).fadeIn(500); 
    }); 
} 
$j("#prev-btn").click(function(){ 
    previous = current; 
    --current; 
    if(current === -1) { 
     current = n_elem - 1; 
    } 
    change(); 
}); 
$j("#next-btn").click(function(){ 
    previous = current; 
    ++current; 
    if(current == n_elem) { 
     current = 0; 
    } 
    change(); 
});