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，但我改变了它，它仍然在cue上发生。有任何想法吗？

Answer 1

我怀疑是因为你的showNews函数永远不会运行。我认为JavaScript引擎正在评估

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

和

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

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

尝试删除两者之间的回车：

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

Answer 2

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

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

.next()正在接下一个兄弟姐妹。你的柜台是.news的兄弟姐妹。要解决您的问题，请执行以下操作：

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

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

幻灯片计数器消失了

2 个答案: