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>

Answer 2

试试这个：

$(document).ready(function () {
    var sage_intId;
    var $sage_banners = $('.banners');
    var sage_timeout = 16000;
    var loopCount = 0;

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

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

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

        if (loopCount < 3) {
            $current.fadeOut();
            $next.fadeIn();
            setTimeout(sage_imageRotation, 2000);
        }
    }

    setTimeout(sage_imageRotation, 2000);
});

Updated fiddle

Or with a data variable to set the number of loops

Answer 3

请看下面的代码段：

$(document).ready(function () {
    var images = $('.banners > img');
    var numImages = images.length;
    var innerLoopIterator = 0;
    var outerLoopIterator = 0;
    var numOuterLoops = 3;
    var stayTime = 400;
    images.hide();
    function rotateImage() {
        images.eq(innerLoopIterator)
            .fadeIn()
            .delay(stayTime)
        	.queue(function(next) {
                innerLoopIterator += 1;
                if (innerLoopIterator >= numImages) {
                    innerLoopIterator = 0;
                    outerLoopIterator += 1;
                }
            	if (outerLoopIterator < numOuterLoops) { next(); rotateImage(); }
        	})
            .fadeOut();
    }
    rotateImage();
});

.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>

jQuery - 循环遍历图像

3 个答案: