在 Array onClick 中显示下一张图片

Question

我正在设置可以通过屏幕箭头单击的图像。目前我所有的图像都通过一个循环和一个数组显示出来。我已经能够设置它，以便当您将鼠标悬停在小图像预览上时，主图像将变为该图像。也可以将鼠标悬停在它们上以查看更大的版本。

我的数组在 mongo 模型中：Listings.currentimages

我下面的当前代码可以在悬停时获取一个小图像来取代特色图像。我将如何更改我的代码以在屏幕左/右箭头上使用？

<% var imgsrc = awspath + listings.currentimages[0] %>
<img  id='mainPicture' class="image-resposive" src=<%=imgsrc%>>
<div id='allimages'>
    <% for(var i = 0; i < listings.currentimages.length; i++ ) { %>
        <div class='smallerImages'>
            <% var imgsrc = awspath + listings.currentimages[i] %>
            <img class="small" src="<%= imgsrc %>">
        </div>
    <% } %>
</div> 

悬停功能：

$('.small').hover(function() {
    $('.small').removeClass('selectedImage')
    var src = $(this).attr('src');
    $(this).addClass('selectedImage')
    $('#mainPicture').attr('src', src);
});

Answer 1

假设您有两个图标（下一个/上一个），您可以定义以下两个事件处理程序以便向右或向左移动：

$('#nextArrow').on('click', function(e) {
    var anchestor = $('.small.selectedImage').closest('.smallerImages');
    var nextImg = $('#allimages .smallerImages:first .small');
    if (anchestor.next().length != 0) {
       nextImg = anchestor.next().find('.small');
    }
    $('.small').removeClass('selectedImage');
    var src = nextImg.attr('src');
    nextImg.addClass('selectedImage');
    $('#mainPicture').attr('src', src);
})


$('#prevtArrow').on('click', function(e) {
    var anchestor = $('.small.selectedImage').closest('.smallerImages');
    var nextImg = $('#allimages .smallerImages:last .small');
    if (anchestor.prev().length != 0) {
        nextImg = anchestor.prev().find('.small');
    }
    $('.small').removeClass('selectedImage');
    var src = nextImg.attr('src');
    nextImg.addClass('selectedImage');
    $('#mainPicture').attr('src', src);
})

Answer 2

我创建了一些代码来做你想做的事。基本上，您必须保留当前显示图像的索引，然后使用该索引显示正确的图像。

我创建了一个虚假的扩展图像列表。你可以丢弃它。

<script>
    var currentImage = 0;
    var maximages = 4;

    $(document).ready(function() {
      $('#leftarrow').click(function() {
        currentImage = currentImage - 1;
        if (currentImage < 0) {
          currentImage = 0;
        }
        updateImage();
      });

      $('#rightarrow').click(function() {
        currentImage = currentImage + 1;
        if (currentImage > maximages) {
          currentImage = maximages;
        }
        updateImage();
      });
    });

    function updateImage() {
      var kids = $('.smallerImages').children();
      var newsrc = kids.eq(currentImage).attr('src');
      
      $('#mainPicture').attr('src', newsrc);

    }
  </script>

  <img id='leftarrow' src="leftarrow.png" style="width:30px;height:200px;" />

  <img id="mainPicture" class="image-resposive" src="test1.png" />
  <span id="rightarrow">
      <img src="leftarrow.png" style="width:30px;height:200px;" />
    </span>
  <div id="allimages">
    <div class="smallerImages">
      <img class="small" src="image1.png" />
    </div>
    <div class="smallerImages">
      <img class="small" src="image2.png" />
    </div>
    <div class="smallerImages">
      <img class="small" src="image3.png" />
    </div>
    <div class="smallerImages">
      <img class="small" src="image4.png" />
    </div>
    <div class="smallerImages">
      <img class="small" src="image5.png" />
    </div>
  </div>