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>

这是我的剧本：

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

See this fiddle (UPDATED TO WORK FOR UNDETERMINED NR OF SLIDES)

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

我使用css z索引的简单jquery幻灯片显示不起作用

2 个答案:

SEE DEMO