1

「最新ニュース」モジュールに問題があります。モジュールの例については、http：//www.proudfootsupermarkets.com/をご覧ください（ページの上部にあるdivで、大きな画像が含まれています）。

現時点では、ユーザーがタブをクリックするとメインの記事が表示されるように設定しています。このためのjQueryは次のとおりです。

    jQuery(document).ready(function() {

    $(".moduletable.latestnews article:first-child").addClass("atfront")

    $(".moduletable.latestnews article").click(function(){
        $(".moduletable.latestnews article").css("zIndex",1).addClass("atback").removeClass("atfront");
        $(this).css("zIndex",100).addClass("atfront").removeClass("atback");
    });
});

これはすべて非常に単純で簡単です。私が抱えている問題は、数秒後に記事を自動的に変更したいということです。これは、記事1から始まり、数秒後に記事2などを表示する無限ループに入ります...

これはかなり単純なことだと思いますが、JavaScriptの知識はほとんど尽きています。あなたが与えることができるどんな助けにも感謝します:)

jsfiddlehttp : //jsfiddle.net/Bempv/を作成しました

4

1 に答える 1

2

setTimeoutを使用して、前の記事を変更できます。クラス「.atfront」の記事を選択してから.next()セレクターを使用すると、探している機能が得られるはずです。

$(function(){
    var articleToggler = function articleToggler(){
    var front = "atfront",
        back = "atback";
    return function(){
       var selection = $(".moduletable.latestnews")
                          .find("article.atfront")
                          .addClass(back)
                          .removeClass(front);
           next = selection.next("article"); 
           next = next.length ? next : $(".moduletable.latestnews")
                                   .find("article").first();
           next.addClass(front)
               .removeClass(back);
           console.log(selection.length,next[0])  


       setTimeout(articleToggler(),1000); //changes every second
    };
};

//start the rotation
(articleToggler())();
});

setTimeoutは、タイムアウトが経過すると、最初の引数として渡された関数を呼び出します。タイムアウト引数はミリ秒単位であるため、上記のコードは関数を呼び出す前に1秒間待機します。上記の関数はコールバックとして自分自身を追加するので、これは無期限に繰り返されます

于 2012-11-12T10:31:50.203 に答える