javascript - 我使用 css zIndex 的简单 jquery 幻灯片无法正常工作

Question

我正在尝试使用 jquery 进行演示，但next按钮工作正常，但back按钮没有按我预期的那样工作，请帮我解决这个问题。提前致谢。

我在这里试过

这是我的html代码：

<div id="slider">
<div id="next">Next</div>
<div id="prev">Back</div>
<div class="slide s1">I'm slide 1</div>
<div class="slide s2">I'm slide 2</div>
<div class="slide s3">I'm slide 3</div>

​</p>

这是我的脚本：

var c=0;
var b=3;
$('.slide:gt(0)').hide();
$('#next').click(function(){
c++;
$('.slide').eq(c).css({zIndex : c}).show('slow');
});
$('#prev').click(function(){
b--;
$('.slide').eq(c).css({zIndex : b}).show('slow');
});​

Answer 1

您没有正确跟踪幻灯片。您不需要两个索引，只需在用户单击下一步时在其他幻灯片之上显示新幻灯片，并在用户单击返回时隐藏顶部幻灯片。

像这样：

var c=0;
$('.slide:gt(0)').hide();
$('#next').click(function(){
    if(c < $('.slide').size()-1) c++;
    $('.slide').eq(c).css({zIndex : c}).show('slow');
});
$('#prev').click(function(){
    if(c>0){
        $('.slide').eq(c).css({zIndex : c}).hide('slow');
        c--;
    }
});​

请参阅此小提琴（已更新以适用于未确定的 NR 幻灯片）

Answer 2

您无需在按钮单击var b = 3减量之前定义只是隐藏幻灯片。back

var c=0;
$('.slide:gt(0)').hide();

$('#next').click(function(){
    c++;
    $('.slide').eq(c).css({zIndex : c}).show('slow');
});

$('#prev').click(function(){
    //hide the slide
    $('.slide').eq(c).css({zIndex : c}).hide('slow');
    c--;
    $('.slide').eq(c).css({zIndex : c}).show('slow');
});

看演示