jquery - Jquery上一个和下一个按钮添加到.delegate事件

Question

这是看起来像任何人都可以帮助我如何将下一个和上一个按钮添加到更大的图像的 html。请帮帮我。

JS：

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>

Answer 1

在不过多更改代码的情况下，这应该可以工作。关于它是如何工作的，有两点需要注意：

1. 活动缩略图具有“活动”类。因此，我们可以轻松跟踪当前正在显示的较大图像。

2. 它依赖于您将下一个和上一个标签的 id 命名为“下一个”和“上一个”，这些用于调用相应的 jQuery 函数来获取下一个和上一个 DOM 元素。

   
   
   
   

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

   });