2

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

2 に答える 2

2

スライドを適切に追跡していませんでした。2つのインデックスは必要ありません。ユーザーが[次へ]をクリックすると他のスライドの上に新しいスライドが表示され、ユーザーが[戻る]をクリックすると一番上のスライドが非表示になります。

このような：

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で機能するように更新されました）

于 2012-08-29T09:29:09.127 に答える
1

ボタンのクリック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');
});

デモを見る

于 2012-08-29T09:26:34.387 に答える