Question

我有一个Flickity轮播图像，当您单击图像/幻灯片时，会打开一个模态窗口以显示所述图像的放大版本。在该模态中，我有一个左右按钮来滚动所有放大的图像。

如果我在滑块中有任何多于或少于3个图像，我的问题是我的代码中断。我需要转换它，以便无论我有多少图像，无论是1,4,2或8等，它都不会破坏。我该怎么做？

下面的我的JS已被简化为仅显示相关位。我也有一个右键功能。有关当前情况，请参阅jsFiddle：https://jsfiddle.net/293sh54n/6/

JS

var activeDivimg;
$( ".product--slider .slide" ).each(function( index ) {
  // Show the modal window
  $('#product-slider-flickity img').click(function(){
    activeDivimg = parseInt($(this).parent().index());
    console.log(activeDivimg)
    $("#imageshow").html('<img src="'+$(this).attr('src')+'"/>');
    $(".p-image-zoom").addClass("md-show");
  });
});
// Zoomed in controls - Scroll left button
$('.left').click(function(){
   if(activeDivimg < 1 ){
    activeDivimg = 2
   }else{
      console.log('kundi'+activeDivimg)
      activeDivimg = activeDivimg - 1
   }
   console.log('left'+activeDivimg)
   $("#imageshow").html('<img src="'+$('.slide').eq(activeDivimg).find('img').attr('src')+'"/>');
    console.log(activeDivimg+"asd")
});

Answer 1

首先，你应该得到图像计数。在左键单击后，使用activeDivimg = imagesCount - 1;而不是activeDivimg = 2;同样的事情右键点击。 fiddle

var imageCount = $('.slide').length;
var activeDivimg;
$( ".product--slider .slide" ).each(function( index ) {
  // Show the modal window
  $('#product-slider-flickity img').click(function(){
    activeDivimg = parseInt($(this).parent().index());
    console.log(activeDivimg)
    $("#imageshow").html('<img src="'+$(this).attr('src')+'"/>');
    $(".p-image-zoom").addClass("md-show");
  });
});
// Zoomed in controls - Scroll left button
$('.left').click(function(){
   if(activeDivimg < 1 ){
    activeDivimg = imagesCount - 1;
   }else{
      console.log('kundi'+activeDivimg)
      activeDivimg = activeDivimg - 1
   }
   console.log('left'+activeDivimg)
   $("#imageshow").html('<img src="'+$('.slide').eq(activeDivimg).find('img').attr('src')+'"/>');
    console.log(activeDivimg+"asd")
});

jQuery轮播 - 任意数量的图像

1 个答案: