Question

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

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

为每个批次添加display: none并不起作用。 JsFiddle here

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>

希望这有帮助

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

1 个答案: