Javascript jQuery循环暂停在特定位置

我对我创建的脚本有一个奇怪的问题。我的jQuery/Javascript技能不是很好（我还在学习），我希望有人能帮助我理解为什么会发生这种情况

我正在开发一个在线商店，上面有一个由4个分区组成的条状分区，每个分区的顶部都有我想为我的客户强调的通知

该网站反应迅速，所以对于移动设备，我想将其减少为一次一个通知，并在每个通知中淡出淡入

我也不想简单地使用CSS媒体查询来显示和隐藏桌面和移动版本，因为我觉得如果我重复两次内容，SEO方面可能会对我不利。因此，我编写了一个jQuery脚本来获取第一组div的内容，将它们放入一个数组中，然后在循环中淡入淡出每个通知

我本以为我已经做到了，但我注意到Firefox和Chrome中都有一些奇怪的东西：它循环一次就好了，但第二次显示“100%幸福保证”时就完全停止了，我不知道为什么

我用这里使用的代码创建了一个JSFIDLE：

---

如果有人能告诉我我做错了什么，我会非常感激的

jQuery代码包含队列/出列逻辑，不需要这样做

对于同样的事情，最好使用简单的jquery。看到这个演示了吗

$（函数（）{
var$highlights=$（“#highlights mobile div”）；
var divsHTML=新数组（）；
$（“#突出显示”）.find（“div”）.each（function（）{
push（$（this.html（））；
});
var位置=-1；
！函数循环（）{
位置=（位置+1）%divsHTML.length；
$highlights.html（divsHTML[position]）
法丹先生（1000）
.延迟（1000）
.衰减（1000，环路）；
}();
});
#突出显示，#突出显示手机{
背景色：#E8E8E8；
边框左上半径：4px；
边框右上角半径：4px；
边框左下半径：4px；
边框右下半径：4px；
位置：相对位置；
显示：块；
框大小：边框框；
溢出：自动；
文本对齐：居中；
边缘底部：20px；
}
#突出显示h4，#突出显示移动h4{
文本对齐：居中；
字体大小：粗体；
填充：0；
保证金：0；
字体大小：1.2米；
}
#手机亮点{
填充：10px；
}
#突出显示移动a，#突出显示a{
颜色：#444；
文字装饰：无；
}
#重点节目组{
文本对齐：居中；
填充：10px；
右边框：1px实心#CDCDCD；
颜色：#444；
溢出：自动；
显示：内联块；
}
@介质（最小宽度：768px）{
#亮点{
显示：块；
}
#精选节目组：最后一个孩子{
边界权：无；
}
}
@介质（最小宽度：768px）{
#重点节目组{
文本对齐：居中；
填充：10px；
右边框：1px实心#CDCDCD；
颜色：#444；
溢出：自动；
显示：内联块；
}
#精选节目组：最后一个孩子{
边界权：无；
}
#高光h4{
文本对齐：居中；
字体大小：粗体；
填充：0；
保证金：0；
字体大小：1.2米；
}
#突出a{
颜色：#444；
文字装饰：无；
}
#手机亮点{
显示：无；
}
}
@介质（最大宽度：767px）{
#亮点{
显示：无；
}
}

订单金额超过250美元，在全国范围内免费送货
i hav注释了一些不需要的队列函数。。现在它的工作..检查还有一个问题，在第一个循环完成后，第一个div永远不会进入fadeIn的循环。因此，我更新了一些关于JS的建议：更好的样式是使用数组文字
var highlights=[]，而不是
new Array（）
，还有
$text
和
delay
变量未正确声明-您缺少
var
，因此它们将成为意外全局变量。你可能想考虑使用这样的东西来捕捉这样的问题。对JS的一个很好的解读是。快乐的脚本！谢谢大家！我一定会检查这两个，以及，@vanhelgen.Wow，这比我的粗尝试要干净得多！非常感谢！
$(document).ready(function() {

    // Transform the highlights div into a 1 line bar for mobile devices

    // Read the highlights div content into an array
    var highlights = new Array();
    $("#highlights").find("div").each(function(){
        highlights.push($(this).html());
    });

    $text = $('#highlights-mobile div'),
    delay = 5;

    // Set the initial highlight item on page load
    $text.html( highlights[0] );

    // Loop through the array and fade in each highlight
    function loop ( delay ) {
        $.each( highlights, function ( i, elm ){
            if ($text.html() != highlights[i]) { // Skip the first fade in on the first loop so it doesn't repeat itself
                $text.delay( delay*1E3).fadeOut();
                $text.queue(function(){
                    $text.html( highlights[i] );
                    $text.dequeue();
                });
                $text.fadeIn();
                $text.queue(function(){
                    if ( i == highlights.length -1 ) {
                        loop(delay);   
                    }
                    $text.dequeue();
                });
            }
        });
    }
    loop( delay );

});