Question

我正在寻找创建一个定制的滑块，需要一些帮助。从理论上讲，它应该相对简单。我让它看起来非常困难。

我创建了两个按钮 - ＃prev-btn和＃next-btn，我希望它们在DOM元素的三个'幻灯片'之间切换。目前你会尖叫我使用幻灯片插件。然而，问题是这些实际上不是幻灯片，而是实际上是分散在页面周围的DOM元素，我希望通过淡入/淡出来打开/关闭它们。

我已经给出了每个想要显示名为“.first”，“。second”和“.third”的类的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。第三类。当.first对象可见时，＃next-btn应淡出.first对象并显示.second类。你明白了。这是我正在努力的一点。

我使用了addClass和removeClass，但是我似乎无法想出一个优雅的解决方案，而不必为每个添加到＃prev-btn AND＃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中最闪亮的火花而且还不能做出聪明的事情，所以请提前为你的帮助加油！如果有人也可以实现自动滑动计时器，那么哇 - 哇哇。但这不是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();
});

jQuery FadeIn / FadeOut DOM元素滑块

1 个答案: