1

これは、次のボタンと前のボタンを大きな画像に追加する方法を誰かが教えてくれるような html です。私を助けてください。

J:

jQuery(function($) {
    $('#thumbs').delegate('img','click', function(){
        var src = this.src.replace('thumb', 'large');
        $("#largeImage").fadeOut(function() {
            this.src = src;
            $(this).fadeIn();
        });
    });
});

HTML:

<div id="page">

  <div id="gallery">

    <div id="panel">
      <img id="largeImage" src="images/image_01_large.jpg" />
    </div>

    <div id="thumbs">
        <img src="images/image_01_thumb.jpg" alt="1st image description" />
        <img src="images/image_02_thumb.jpg" alt="2nd image description" />
        <img src="images/image_03_thumb.jpg" alt="3rd image description" />
        <img src="images/image_04_thumb.jpg" alt="4th image description" />
        <img src="images/image_05_thumb.jpg" alt="5th image description" />
    </div>

  </div>

  <a href="#" id="next">Next</a>
  <br />
  <a href="#" id="prev">Prev</a>

</div>
4

1 に答える 1

0

コードをあまり変更しなくても、これは機能するはずです。この仕組みについては、次の 2 つの点に注意してください。

  1. アクティブなサムネイルには、クラス「アクティブ」があります。そのため、現在表示されている大きな画像を簡単に追跡できます。

  2. next タグと prev タグの ID を "next" と "prev" という名前にしておく必要があります。これらは、次の DOM 要素と前の DOM 要素を取得する対応する jQuery 関数を呼び出すために使用されます。




        <div id="thumbs">
        <img class="active" src="images/image_01_thumb.jpg" alt="1st image description" />
        <img src="images/image_02_thumb.jpg" alt="2nd image description" />
        <img src="images/image_03_thumb.jpg" alt="3rd image description" />
        <img src="images/image_04_thumb.jpg" alt="4th image description" />
        <img src="images/image_05_thumb.jpg" alt="5th image description" />     
    </div> 
</div> 
<div id="gallery-nav">
    <a href="#" id="next">Next</a> <br /> <a href="#" id="prev">Prev</a>
</div>

    $(関数() { 
      var thumbs = $('#thumbs'),
      largeImage = $('#largeImage');

  thumbs.delegate('img','click', function(){
      var $this = $(this).addClass('active'),
          src = $(this).attr('src').replace('thumb', 'large');

      thumbs.find('.active').removeClass('active');

      largeImage.fadeOut(function() {
          this.src = src;
          $(this).fadeIn();
      });
  });

  $('#gallery-nav a').click(function() {
      var type = $(this).attr('id'),
          thumbImages = thumbs.find('img'),
          next = thumbImages.filter('.active')
                  .removeClass('active')[type]();

        if(!next.length) {
            next = type === 'next' ? thumbImages.filter(':first-child') : thumbs.find(':last-child');
        }

        var src = next.attr('src').replace('thumb', 'large');

      largeImage.attr('src', src);
      next.addClass('active');
  });
    });
于 2012-07-05T07:09:13.033 に答える