0

サムネイル ボタン (画像ごとに 1 つ) をクリックすると、フェードによって画像が交換され、テキスト キャプションが交換される単純な jquery 画像ギャラリーを作成しようとしています。

絶対に上下に配置された画像を含むdivと、その下にサムネイル/ボタンがあるキャプションがあります。

私が書いたjqueryは、ページがロードされたときの最初の遷移を除いて機能します。最初のトランジションでは、ターゲット イメージが表示され、フェード アウトしてからフェード インに戻ります。単純にフェード インする必要があります。

私はjqueryを初めて使用するので、これが悪いコードである場合は申し訳ありません...

最初のトランジションが正しく機能しない理由を誰か教えてもらえますか?

ありがとう

Jクエリ:

$(document).ready(function(){
    $('.gallery_button').click(function(){
     $('.gallery_slide').animate( {opacity:0.0}, 2000 );
     $('#slide'+$(this).attr('id')).toggleClass('visible');
     $('#slide'+$(this).attr('id')).animate( {opacity:1.0}, 2000 );
     $('.gallery_caption').hide();
         $('#caption'+$(this).attr('id')).show();
         $('#caption'+$(this).attr('id')).toggleClass('visible');
    });
});

HTML:

<div id="gallery_slider">
<div class="gallery_slide" id="slide1"><img src="img1.jpg"/></div>
<div class="gallery_slide hidden" id="slide2"><img src="img2.jpg"/></div>
<div class="gallery_slide hidden" id="slide3"><img src="img3.jpg"/></div>

<div class="gallery_caption" id="caption1">Caption 1</div>
<div class="gallery_caption hidden" id="caption2"/>Caption2</div>
<div class="gallery_caption hidden" id="caption3"/>Caption3</div>

<div class="gallery_button"><img src="button.gif" id="1"/></div>
<div class="gallery_button"><img src="button.gif" id="2"/></div>
<div class="gallery_button"><img src="button.gif" id="3"/></div>
</div>

CSS:

#gallery_slider{position:relative; height:500px;}
.gallery_slide{position:absolute; top:0; left:0; width:640px; height:480px;}
.gallery_caption{position:absolute; bottom:20px; left:660px; width:160px; min-height:150px;}
.gallery_button{width:10px; height:10px; margin:490px 8px 0 0; float:left;}

.hidden{display:none;}
.visible{display:block; visibility:visible;}
4

3 に答える 3

0

これは私の最初のjqueryであったため、元の形式を使用して元の問題をソートする方法を考え出したかったので、最終的にそれを機能させることができました:

$(document).ready(function(){
$('.gallery_button').click(function(){
    var id = this.id;
    $('.gallery_caption:visible').hide();
    $('.gallery_slide:visible').fadeOut(500, function(){
        $('#slide' + id).fadeIn(5000);
        $('#caption' + id).show();
    });
    });
});

入力とヘルプに感謝します

于 2013-01-24T19:00:17.703 に答える
0

コメントすることはできませんが、あなたの HTML はちょっとした見直しが必要だということを指摘しておきたいと思います。

div には end がないように見えるため、下部のボタンはネストされています。また、他のdivの一部は次の形式です

<div />something</div>

それ以外の

<div>something</div>

コードのクリーンアップされたバージョンは次のとおりです。

<div id="gallery_slider">
<div class="gallery_slide" id="slide1"><img src="img1.jpg"/></div>
<div class="gallery_slide hidden" id="slide2"><img src="img2.jpg"/></div>
<div class="gallery_slide hidden" id="slide3"><img src="img3.jpg"/></div>

<div class="gallery_caption" id="caption1">Caption 1</div>
<div class="gallery_caption hidden" id="caption2">Caption2</div>
<div class="gallery_caption hidden" id="caption3">Caption3</div>

<div class="gallery_button"><img src="button.gif" id="1"/></div>
<div class="gallery_button"><img src="button.gif" id="1"/></div>
<div class="gallery_button"><img src="button.gif" id="1"/></div>
</div>

また、いくつかの既存のものを見たい場合 (そこにあるものを使用することは常に良いことであり、あなたがそれを好むのであれば、多くの人によってテストされています)、または単に他の人がこれをどのように行ったかについてのアイデアを得るためです.以前、私はあなたが達成しようとしているものを達成すると思われるいくつかの人気のあるプラグインを調べて見つけました:

それが役立つことを願っています。

編集：

ID を使用せずにこれを行う方法を例証するために、小さなコード スニペット (猫と一緒に笑ってください) を作成しました。これにより、ID を気にすることなく、新しい要素を追加してそれらを交換することができます。

http://jsfiddle.net/Q6agB/1/ (2 回目の編集後) http://jsfiddle.net/Q6agB/3/ (3 回目の編集、コメント付き)

関連する要素 (つまり、キャプション付きの画像) を一緒に保つのは良いことです。そうすれば、それらを簡単に移動できます。また、誰かがあなたのものをちらりと見たときに (コードをすべて忘れた後、しばらくするとあなたかもしれません)、彼らはあなたが何をしてきたかを簡単に知ることができます。そのため、キャプションと画像をグループ化しました。

それはあなたが達成しようとしていたことですか？

于 2013-01-23T21:23:24.687 に答える
0

それがまさにこのコードが実行するように指示していることです:

 $('#slide'+$(this).attr('id')).toggleClass('visible'); // shows it
 $('#slide'+$(this).attr('id')).animate( {opacity:1.0}, 2000 );  // fades it in

代わりにこれを試してください：

$(document).ready(function () {
  $('.gallery_button img').click(function () {
    var id = this.id;
    $('.gallery_caption').hide();
    $('.gallery_slide').fadeOut(2000, function () {
      $('#caption' + id).show();
      $('#slide' + id).fadeIn(2000);
    });
  });
});

http://jsfiddle.net/mblase75/Utb8f/

于 2013-01-23T20:50:51.160 に答える