jQuery-循环浏览图像

我在一组中有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>

$(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个圈

假设我必须创建一个变量，并在集合的最后一个图像出现和消失后更新该变量，这对吗

---

这是一个用于实时预览的计数器

您可以尝试以下计数器

$（文档）.ready（函数（）{
变量sage_intId，$sage_banners=$（“.banners”），
$imgs=$sage_banners.find（'img'），
计数器=0；
$imgs.slice（1.hide（）；
函数sage_imageRotation（）{
var$current=$imgs.filter（“：可见”），
$next=$current.next（）；
如果（$next.length==0）{
$next=$sage_banners.find（'img:eq（0）'）；
}
$current.fadeOut（）；
$next.fadeIn（）；
if（$next.is（$imgs.last（）））{
如果（++计数器>2）{
净空间隔（sage_intId）；
}
}
}
sage_intId=setInterval（函数（）{
sage_图像旋转（）；
}, 500);
});
.banner{
保证金：0自动；
宽度：250px；
高度：250px；
位置：相对位置；
右边距：10px；
浮动：左；
}
.横幅{
位置：绝对位置；
排名：0；
左：0；
显示：块；
}

试试这个：

$(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);
});

$（文档）.ready（函数（）{
sage_intId变种；
var$sage_banners=$（“.banners”）；
var sage_超时=16000；
var-loopCount=0；
$sage_banners.find（'img:gt（0）'）.hide（）；
函数sage_imageRotation（）{
var$current=$sage_banners.find（'img:visible'）；
var$next=$current.next（）；
如果（$next.length==0）{
$next=$sage_banners.find（'img:eq（0）'）；
loopCount++；
}
if（循环计数<3）{
$current.fadeOut（）；
$next.fadeIn（）；
设置超时（sage_imageRotation，2000年）；
}
}
设置超时（sage_imageRotation，2000年）；
});


看看下面的片段：


$（文档）.ready（函数（）{
var images=$（'.banners>img'）；
var numImages=images.length；
var innerLoopIterator=0；
var outerLoopIterator=0；
var numOuterLoops=3；
var-stayTime=400；
image.hide（）；
函数rotateImage（）{
image.eq（innerLoopIterator）
.fadeIn（）
.延迟（停留时间）
.queue（函数（下一个）{
innerLoopIterator+=1；
if（innerLoopIterator>=numImages）{
innerLoopIterator=0；
outerLoopIterator+=1；
}
if（outerLoopIterator
.banner{
保证金：0自动；
宽度：250px；
高度：250px；
位置：相对位置；
右边距：10px；
浮动：左；
}
.横幅{
位置：绝对位置；
排名：0；
左：0；
显示：块；
}

所以你不想使用
setTimeout
？@GuruprasadRao-我不想依靠set
setTimeout
来确定图像旋转所经历的循环量，这就是我目前正在做的。我更喜欢设置一个可能的变量，例如
var loops=3或类似的东西谢谢你的输入谢谢分享Arun