如何在jQuery图像循环器中隐藏非活动图像

Question

我正在使用一个插件，通过淡入/淡出并设置正确的 z 索引来循环堆叠的图像批次。它按预期工作，除了非活动图像在活动图像后面可见。这是一个问题，因为我的图像高度和宽度不完全相同。

我如何修复它 - 通过添加一些jQuery或css？

向每个批次添加display: none不起作用。JsFiddle 在这里。

.html：

<div id="wrapper">
  <div class="batch">
    <a href="#">
    <img src="https://placeimg.com/640/450/any">
  </a>
    <a href="#">
    <img src="https://placeimg.com/620/460/any">
  </a>
    <a href="#">
    <img src="https://placeimg.com/640/480/any">
  </a>
  </div>
  <div class="batch">
    <a href="#">
    <img src="https://placeimg.com/640/480/any">
  </a>
    <a href="#">
    <img src="https://placeimg.com/640/430/any">
  </a>
    <a href="#">
    <img src="https://placeimg.com/640/420/any">
  </a>
  </div>
  <div class="batch">
    <a href="#">
    <img src="https://placeimg.com/640/480/any">
  </a>
    <a href="#">
    <img src="https://placeimg.com/640/480/any">
  </a>
    <a href="#">
    <img src="https://placeimg.com/640/480/any">
  </a>
  </div>
</div>

.js：

(function($) {
  $.fn.rotator = function(options) {
    options = $.extend({
      blocks: '.batch',
      speed: 6000,
      fadeSpeed: 800
    }, options);
    var setZIndex = function(element) {
      var index = $(options.blocks, element).length;
      $(options.blocks, element).each(function() {
        index--;
        $(this).css('zIndex', index);
      });
    };
    var rotate = function(element) {
      var blocks = $(options.blocks, element),
        len = blocks.length,
        index = -1;
      blocks.fadeIn(options.fadeSpeed);
      var timer = setInterval(function() {
        index++;
        var block = blocks.eq(index);
        if (index == len) {
          clearInterval(timer);
          rotate(element);
        }
        if (block.index() != (len - 1)) {
          block.fadeOut(options.fadeSpeed);
        }
      }, options.speed);
    };
    return this.each(function() {
      var elem = $(this);
      setZIndex(elem);
      rotate(elem);
    });
  };
})(jQuery);
$('#wrapper').rotator();

.CSS：

#wrapper {
  height: 185px;
  position: relative;
}
.batch {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.batch>a {
  float: left;
  width: 33%;
  height: 100%;
  text-align: center;
  min-width: 0;
  overflow: hidden;
}
.batch>a img {
  margin: 0 auto;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

Answer 1

由于您的JS函数依赖于z-index而不是display，因此我隐藏图像将花费更多精力，并且也不会帮助您确定图像的纵横比。尝试将height: 100%;和object-position: center;添加到您的img中，您将获得接近您要求的答案。

(function($) {
  $.fn.rotator = function(options) {
    options = $.extend({
      blocks: '.batch',
      speed: 6000,
      fadeSpeed: 800
    }, options);
    var setZIndex = function(element) {
      var index = $(options.blocks, element).length;
      $(options.blocks, element).each(function() {
        index--;
        $(this).css('zIndex', index);
      });
    };
    var rotate = function(element) {
      var blocks = $(options.blocks, element),
        len = blocks.length,
        index = -1;
      blocks.fadeIn(options.fadeSpeed);
      var timer = setInterval(function() {
        index++;
        var block = blocks.eq(index);
        if (index == len) {
          clearInterval(timer);
          rotate(element);
        }
        if (block.index() != (len - 1)) {
          block.fadeOut(options.fadeSpeed);
        }
      }, options.speed);
    };
    return this.each(function() {
      var elem = $(this);
      setZIndex(elem);
      rotate(elem);
    });
  };
})(jQuery);
$('#wrapper').rotator();

#wrapper {
  height: 185px;
  position: relative;
}
.batch {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.batch>a {
  float: left;
  width: 33%;
  height: 100%;
  text-align: center;
  min-width: 0;
  overflow: hidden;
}
.batch>a img {
  margin: 0 auto;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="batch">
    <a href="#">
    <img src="https://placeimg.com/640/450/any">
  </a>
    <a href="#">
    <img src="https://placeimg.com/620/460/any">
  </a>
    <a href="#">
    <img src="https://placeimg.com/640/480/any">
  </a>
  </div>
  <div class="batch">
    <a href="#">
    <img src="https://placeimg.com/640/480/any">
  </a>
    <a href="#">
    <img src="https://placeimg.com/640/430/any">
  </a>
    <a href="#">
    <img src="https://placeimg.com/640/420/any">
  </a>
  </div>
  <div class="batch">
    <a href="#">
    <img src="https://placeimg.com/640/480/any">
  </a>
    <a href="#">
    <img src="https://placeimg.com/640/480/any">
  </a>
    <a href="#">
    <img src="https://placeimg.com/640/480/any">
  </a>
  </div>
</div>

希望这有帮助