0

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

我创建了两个按钮 - #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 对象和淡入 .third 类。此外，当 .first 对象可见时，#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 中最耀眼的火花，还不能做聪明的事情，所以提前为帮助欢呼！如果有人也可以在其中实现自动滑动计时器，那么哇 - 哇。但这不是 100% 必要的。干杯!

4

1 回答 1

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();
});
于 2012-11-29T17:32:33.950 回答