1

http://jsfiddle.net/rabelais/DW5CV/を参照してください。

このフィドルをまとめて、非常に単純なjQueryを使用して、ページの読み込み時に最初のフルスクリーン画像を表示し、ユーザーがこの画像をクリックすると非表示になり、次の画像が表示される方法を試してみました。ページ上では、多くの画像を通じて表示されます。私はそれらすべてに個別のIDを与えてから、各divを示す非常に長いコードを書くことができることを知っていますが、これをよりきちんとした方法で行う方法を学びたいですか?

  $('#img1').click(function() {
  $('#img2').show();
  $('#img1').hide();
  });
4

6 に答える 6

1

私は JQuery のヒーローではありませんが、これがあなたの役に立つことを願っています。

HTML:

<div class="imageBox">
    <img src="..." />
    <img src="..." />
    <img src="..." />
</div>

JQuery:

$(document).ready( function() {
    $(".imageBox img").hide();
    $(".imageBox img:first-child").show();
});

$(".imageBox img").on( "click", function() {
    if( $(this).next().length > 0 ) {
        $(this).hide();
        $(this).next().show();
    }
    else {
        $(this).hide();
        $(".imageBox img:first-child").show();
    }
});

そしてデモ。

于 2013-09-30T11:43:19.530 に答える
1

私はあなたのコードに基づいて本当に簡単なフィドルを作りました. 画像は最後の画像までアニメーション化され.show()ます。.hide()画像が残っていないため、アニメーションは停止します。

このフィドルをチェックしてください。

于 2013-09-30T11:32:48.010 に答える
1

サンプルフィドルに基づいて、以下のようなものを試すことができます:

$('.full').click(function () {
    $(this).hide();
    $(this).next('.full').show();
});

注: これは 1 回の繰り返しでのみ機能します。ループさせたい場合は、コードを変更できます。

デモフィドル

編集:ループを機能させるには、以下のようにコードを変更します。基本的に、クラスを持つnext要素（divを含むimg）があるかどうかを確認しています。.full存在する場合は、それを行いshowます。それ以外の場合は、クラスをshow持つ最初の要素です。.full

$('.full').click(function () {
    $(this).hide();
    if($(this).next('.full').length === 1)
        $(this).next('.full').show();
    else
        $('.full').eq(0).show();
});

更新されたデモ

于 2013-09-30T11:41:22.263 に答える
0

こちら にある JQuery の Animate API を使用できます。

于 2013-09-30T11:28:43.420 に答える
0

これはうまくいきます、これを試してください。

$('.full').not(':first').hide();
 $('.full').click(function(){
        $(this).hide();
        $(this).next().show();
 });

ウォーキングデモ

于 2013-09-30T12:25:59.353 に答える