1

グラフやその他のさまざまなデータを含むさまざまな div を循環するために使用しているこのクイック カルーセルをまとめました。現在表示している「ページ」または div を示すものが必要です。

これは、divを反復処理するために現在行っていることの例です。 http://jsfiddle.net/d6nZP/64/

私の計画は、行に示されているページに応じて、アクティブな状態またはアクティブでない状態のドットの行を持つことです。しかし、基本的なページ カウンターでさえ、この時点では機能します。

どんな助けでも大歓迎です、ありがとう!

4

3 に答える 3

4

これがカルーセル用の簡単なポケットベルです。楽しんでください;） http://jsfiddle.net/d6nZP/65/

于 2012-06-12T00:12:07.533 に答える
2

使用できるものを作成しましたhttp://jsfiddle.net/BadBoyBill/8yHmy/

    $("div[id^=marquee]:gt(0)").hide();

    function startTimer(){
        i = setInterval(rotate, 2000);
        return i;
    }

    var intID = startTimer();

    function stopTimer(){
        clearInterval(intID);
    }

    function rotate(){
        reference = $("div[id^=marquee]:visible").hide().next("div[id^=marquee]");
        reference.length ? $(reference).fadeIn() : $("div[id^=marquee]:first").fadeIn() ;
        dot = $(".indicator-on[id^=indicator]").removeClass("indicator-on").next("a[id^=indicator]").addClass("indicator-on");
        dot.length ? $(dot).addClass("indicator-on") : $("a[id^=indicator]:first").addClass("indicator-on");
    }

    $("div[id^=marquee]").each(function(){
        $("#indicators").append("<a href='#' id='indicator' class='indicator'></a>");
        $(".indicator:first").addClass("indicator-on");
    });

    $("a[id^=indicator]").click(function(e){
        var index = $("a[id^=indicator]").index(this);
        //alert(index);
        $("div[id=marquee]").hide();
        $("div[id=marquee]").eq(index).show();
        $("a[id=indicator]").removeClass("indicator-on");
        $("a[id=indicator]").eq(index).addClass("indicator-on");
        stopTimer();
        intID = startTimer();
        e.preventDefault();
    });

    $("a[id=indicator], div[id=marquee]").mouseenter(function(){
        stopTimer();
        //alert("mouseenter");
    }).mouseleave(function(){
        stopTimer();
        intID = startTimer();
        //alert("mouseexit");
    });
于 2012-12-05T16:48:27.117 に答える
1

これを行う最も簡単な方法は、カウンターとして機能するコンテンツ div 自体に何かを配置することです。つまり、最初の div に「1/3」を配置し、次の「2/3」に配置するなどです。その方法はもちろんです。 、変化にあまり反応しないという欠点があります。より良いオプションは、どの要素が表示されているかを追跡する別の変数を保持することです。次に、「次へ」ボタンがクリックされると、変数がインクリメントされ、そのインデックスが存在するかどうかを確認するためにチェックが実行されます。そうでない場合は、先頭に戻ります。もちろん、前のボタンでは反対です。

于 2012-06-12T00:05:54.893 に答える