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