Question

我当前的代码是图片的滑块。单击任何图像时，它会在模态窗口中打开更大的版本。值得一提的是，我不能使用插件，而且我已经在这里查看了其他问答，但答案要么已经过时，要么对我的情况不起作用。

目前，您无法在模态中滑动较大的图像，只能打开/关闭您所在的图像。我想在模态窗口中启用一个滑块，只需从左到右滚动较大的图像。我设置了下一个/右键，试图让它们简单淡入/淡出下一个/上一个图像，但它们目前没有做任何事情。

请参阅我创建的jsFiddle来模拟我当前的设置。

JS

＆＃13;

 $(".product--slider .slide").each(function(index) {
   // Show the modal window
   $('#product-slider-flickity img').click(function() {
     $("#imageshow").html('<img src="' + $(this).attr('src') + '"/>');
     $(".p-image-zoom").addClass("md-show");
   });
 });


 $('.md-close-zoom').click(function() {
   $('.p-image-zoom').removeClass('md-show');
 });

 $('#imageshow').click(function() {
   $(".p-image-zoom").removeClass("md-show");
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product--slider" id="product-slider-flickity" data-flickity='{ "wrapAround": true, "pageDots": false, "imagesLoaded": true, "draggable": false }'>
  <div class="slide image-1">
    <img src="http://placekitten.com/1024/1024" />
  </div>
  <div class="slide image-2">
    <img src="http://fillmurray.com/1024/1024" />
  </div>
  <div class="slide image-3">
    <img src="http://placehold.it/1024x1024" />
  </div>
</div>

<div class="md-modal p-image-zoom">
  <div class="md-content">
    <div id='imageshow'></div>
    <button class="md-close-zoom">Close</button>
  </div>
</div>
<div class="md-overlay"></div>

＆＃13;

Answer 1

看看我做了什么伙伴，如果可以，请告诉我。https://jsfiddle.net/293sh54n/6/

  $('.left').click(function(){
   if(activeDivimg < 1 ){
    activeDivimg = 2
    }else{
      activeDivimg = activeDivimg - 1
    }
    console.log('left'+activeDivimg)
    $("#imageshow").html('<img src="'+$('.slide').eq(activeDivimg).find('img').attr('src')+'"/>');
        console.log(activeDivimg+"asd")
  });

  $('.right').click(function(){
  if (activeDivimg == 2){
      activeDivimg = 0
  }else{
      activeDivimg = activeDivimg + 1
  }

jquery自定义轮播图像缩放模式

1 个答案: