幻灯片计数器消失

Question

我有这段代码应该为幻灯片生成一个计数器，然后更改计数器中的图片和相应的数字颜色。但是，在幻灯片循环播放两次后，计数器会变为 display:none，然后在每次幻灯片开始循环时重新出现和消失。

//icons for newsreel guide
for(i=0;i<document.getElementsByClassName("news").length;i++){
    var count=i+1;
    $('#counter').append('<span class="count">'+count+'</span>');
}
//newsreel script
$(".news").hide();
setTimeout (function() {
    var wait = $(".news:last").index()*12000+12000;
    function newsreel(){
    var i=0;
    (function showNews(elem){
        if(i==document.getElementsByClassName("count").length){
            i=0;
        }
        document.getElementsByClassName("count")[i].style.color="#000";
        elem.fadeIn(2000,function(){
            elem.delay(8000).fadeOut(2000,function(){
                document.getElementsByClassName("count")[i].style.color="#3159a0";
                i=i+1;
                $(this).next().length && showNews($(this).next()); 
            });
        });
    })
    ( $(".news:first"));
    setTimeout (arguments.callee, wait);
    }/*end newsreel()*/
    newsreel();
}, 2000);

起初我以为它使用了已弃用的arguments.callee，但我改变了它，它仍然在提示时发生。有任何想法吗？

Answer 1

我检查了你的代码，问题出在这一行：

$(this).next().length && showNews($(this).next())

.next() 正在获得下一个兄弟姐妹。您的计数器是.news 的兄弟。要解决您的问题，请执行以下操作：

$(this).next().length && showNews($(this).next('.news'))

这将选择类news的下一个兄弟。

Answer 2

我怀疑这是因为您的 showNews 函数从未运行。我认为 JavaScript 引擎正在评估

(function showNews(elem){
    //...
})

和

( $(".news:first"));

作为两个不同的表达式，而不是按照您的意图将$(".news:first") 作为参数传递给showNews。由于; 在 JS 中是可选的，如果结果是有效的 JavaScript，解析器将自动插入一个。在这种情况下，它定义了一个函数但从不调用它，然后构建一个 jQuery 序列但从不使用它。

尝试去掉两者之间的回车：

(function showNews(elem){
    //...
})($(".news:first"));