jquery - 图片库按钮不会淡出并且图像消失

Question

在下面的画廊中，除了单击上一个按钮外，一切正常。第一个图像消失并且按钮没有淡出!

演示:https://jsfiddle.net/ub56gs8y/2/

  function checkIimg() {
    if ($(".sample:first").hasClass("img-active")) {
      $(".b1").fadeOut(100);
    } else {
      $(".b1").fadeIn(100);
    }

    if ($(".sample:last").hasClass("img-active")) {
      $(".b2").fadeOut(100);
    } else {
      $(".b2").fadeIn(100);
    }
  }

  checkIimg();

  $(".buttons button").click(function() {
    if ($(this).hasClass("b2")) {
      $(".sample.img-active").fadeOut(100, function() {
        $(this).removeClass("img-active").next(".img-hidden").addClass("img-active").fadeIn(100);
        checkIimg();
      });
    } else {
      $(".sample.img-active").fadeOut(100, function() {
        $(this).removeClass("img-active").prev(".img-hidden").addClass("img-active").fadeIn(100);
        checkIimg();
      });
    }
  });

.img-hidden {
  display: none;
}

button {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
       <div class="col-12 gallery-images">
         <img src="https://placeimg.com/100/100/any" class="sample img-active" />
         <img src="https://placeimg.com/100/100/nature" class="sample img-hidden" />
         <img src="https://placeimg.com/100/100/arch" class="sample img-hidden" />
         <img src="https://placeimg.com/100/100/animals" class="sample img-hidden" />
         <img src="https://placeimg.com/100/100/people" class="sample img-hidden" />
         <img src="https://placeimg.com/100/100/tech" class="sample img-hidden" />
       </div>

       <div class="buttons">
         <button class="b1">previous</button>
         <button class="b2">Next</button>

       </div>
     </div>

  $(".buttons button").click(function() {
    if ($(this).hasClass("b2")) {
      $(".sample.img-active").fadeOut(100, function() {
        $(this).removeClass("img-active").next(".img-hidden").addClass("img-active").fadeIn(100);
    checkIimg();
      });
    } else {
      $(".sample.img-active").fadeOut(100, function() {
        $(this).removeClass("img-active").prev(".img-hidden").addClass("img-active").fadeIn(100);
        checkIimg();
      });
    }
  });

Answer 1

您忘记将 img-hidden 类添加到隐藏图像中。

在选择元素后、淡入淡出之前添加:

$(".sample.img-active").addClass("img-hidden").fadeOut(...

完整示例:

function checkIimg() {
    if ($(".sample:first").hasClass("img-active")) {
      $(".b1").fadeOut(100);
    } else {
      $(".b1").fadeIn(100);
    }

    if ($(".sample:last").hasClass("img-active")) {
      $(".b2").fadeOut(100);
    } else {
      $(".b2").fadeIn(100);
    }
  }

  checkIimg();

  $(".buttons button").click(function() {
    if ($(this).hasClass("b2")) {
      $(".sample.img-active").addClass("img-hidden").fadeOut(100, function() {
        $(this).removeClass("img-active").next(".img-hidden").addClass("img-active").fadeIn(100);
        checkIimg();
      });
    } else {
      $(".sample.img-active").addClass("img-hidden").fadeOut(100, function() {
        $(this).removeClass("img-active").prev(".img-hidden").addClass("img-active").fadeIn(100);
        checkIimg();
      });
    }
  });

.img-hidden {
  display: none;
}

button {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
       <div class="col-12 gallery-images">
         <img src="https://placeimg.com/100/100/any" class="sample img-active" />
         <img src="https://placeimg.com/100/100/nature" class="sample img-hidden" />
         <img src="https://placeimg.com/100/100/arch" class="sample img-hidden" />
         <img src="https://placeimg.com/100/100/animals" class="sample img-hidden" />
         <img src="https://placeimg.com/100/100/people" class="sample img-hidden" />
         <img src="https://placeimg.com/100/100/tech" class="sample img-hidden" />
       </div>

       <div class="buttons">
         <button class="b1">previous</button>
         <button class="b2">Next</button>

       </div>
     </div>