jQuery - 循环图像

Question

我的一组图像中有 3 张图像，我想将其循环 3 次。在最后一个循环中，我希望最后一个图像保持不变而不改变。

到目前为止，我已经得到以下内容:

HTML:

<div class="banners">
    <img src="http://placehold.it/250/27B700/ffffff?text=first" alt="" />
    <img src="http://placehold.it/250/000CB7/ffffff?text=second" alt="" />
    <img src="http://placehold.it/250/ff0000/ffffff?text=last" alt="" />
</div>

JS:

$(document).ready(function() {

    var intId;
    var $banners = $('.banners');
    var timeout  = 16000;

    $banners.find('img:gt(0)').hide();

    function imageRotation() 
    {
        var $current = $banners.find('img:visible');
        var $next = $current.next();

        if ($next.length == 0) 
        {
            $next = $banners.find('img:eq(0)');
        }

        $current.fadeOut();
        $next.fadeIn();
    }

    intId = setInterval(function() {
        imageRotation();
    }, 2000);

    setTimeout(function() {
        clearInterval(intId);
    }, timeout);

});

目前，我使用 16000 超时来确定循环计数和旋转所到达的最后一个图像。

这适用于 Firefox，但不适用于某些浏览器，并且不是可靠的方法。

任何人都可以阐明如何精确地进行 3 个循环并落在该组的最后一个图像上吗？

我是否正确地假设我必须创建一个变量并在该组的最后一个图像出现和消失后更新该变量？

这是一个JSFiddle实时预览

Answer 1

你可以尝试像这样的计数器

$(document).ready(function() {

  var sage_intId, $sage_banners = $('.banners'),
    $imgs = $sage_banners.find('img'),
    counter = 0;

  $imgs.slice(1).hide();

  function sage_imageRotation() {
    var $current = $imgs.filter(':visible'),
      $next = $current.next();

    if ($next.length == 0) {
      $next = $sage_banners.find('img:eq(0)');
    }

    $current.fadeOut();
    $next.fadeIn();

    if ($next.is($imgs.last())) {
      if (++counter > 2) {
        clearInterval(sage_intId);
      }
    }
  }

  sage_intId = setInterval(function() {
    sage_imageRotation();
  }, 500);
});

.banners {
  margin: 0 auto;
  width: 250px;
  height: 250px;
  position: relative;
  margin-right: 10px;
  float: left;
}
.banners img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="banners">
  <img src="http://placehold.it/250/27B700/ffffff?text=first" alt="" />
  <img src="http://placehold.it/250/000CB7/ffffff?text=second" alt="" />
  <img src="http://placehold.it/250/ff0000/ffffff?text=last" alt="" />
</div>