在Array onClick中显示下一张图片 [英] Show next image in Array onClick

问题描述

我正在设置可以用屏幕上的箭头单击的图像.目前，我所有的图像都通过循环和数组显示.我已经能够对其进行设置，以便当您将鼠标悬停在smallimage预览上时，主图像将更改为该图像.又可以将鼠标悬停在它们上面以查看较大的版本.

I am working on setting up images that can be clicked through with on screen arrows. Currently I have the images all showing up via a loop and an array. I have been able to set it up so that when you hover on a smallimage preview the main image will change to that image. Aka you can hover on them to see the larger version.

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

My array is within a mongo model: Listings.currentimages

下面的我当前的代码用于将小图像悬停在上方，以取代特色图像.如何更改代码以与屏幕上的向左/向右箭头一起使用?

My current code below works to get a small image to take over the featured image when hovered on. How would I change my code to work with on screen left/right arrows?

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

推荐答案

假设您有两个图标(下一个/上一个)，则可以定义以下两个事件处理程序以向右或向左移动:

Assuming you have two icons (next/prev) you can define the two following event handlers in order to move right or left:

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

这篇关于在Array onClick中显示下一张图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！