1

Web から入手したチュートリアルに基づいて、基本的なコンテンツ スライダーを作成しました。

この例では、スライドはパラメーターを使用して時間間隔でスクロールしsetTimeoutますが、選択したスライドに直接移動できるナビゲーション機能も (もちろん) 備えています。

Timeoutスライドは、スライドが選択されたとき、および明らかにマウスがホバーしたときに一時停止せずにスクロールします。

スクロールを制御する主要なjavaScript/jQuery コードは基本的に次のとおりです (合計 7 つのスライド) 。

var currentSlide = 0;

function slideScroll(){
    if (currentSlide == 7)
    selectSlide(1);
else
    selectSlide( currentSlide + 1 );

setTimeout ('slideScroll()', 4000);

}

（（キーがこの関数であることはかなり確信していたので、他のjavaScriptコードは省略しましたが、明確にするために必要に応じて前兆コードで質問を更新できます。））

最終的なゲームは、a)Timeoutユーザーが新しいスライドを選択するたびにリセットすること、およびb)Timeoutマウスがスライドのコンテンツ上に移動したときに一時停止することです。

コードはsetTimeout、いくつかのifステートメントまたは何かと組み合わせて挿入する必要があると思います。誰かがエンドゲームa)とb)のこのソリューションを考案するのを手伝ってくれますか?

ライブプロトタイプであり、恥知らずなプラグインではありません:こちら

事前にヒントをありがとう！

4

1 に答える 1

1

一時停止のチェックと、タイマー参照を保持する変数を追加します

var currentSlide = 0,
    paused = 0,
    timer;

function slideScroll () {
    if (paused) {/* action if paused or leave blank*/}
    else if (currentSlide === 7) selectSlide(1);
    else selectSlide(currentSlide + 1);
    timer = setTimeout(slideScroll, 4000);
}

次に、スライドの選択でクリックします

clearTimeout(timer);
timer = setTimeout(slideScroll, 4000);

次に、マウスオーバーで

paused = 1;

とマウスアウト

pause = 0;

または、呼び出されたほとんどの場合、ほとんど何もしない短いタイムアウトを使用します。

var currentSlide = 0,
    paused = 0,
    remain = 4000;

function slideScroll () {
    if (!paused) {
        if (remain > 0) remain -= 200;
        else {
            remain = 4000;
            if (currentSlide === 7) selectSlide(1);
            else selectSlide(currentSlide + 1);
        }
    }
    setTimeout(slideScroll, 200);
}

次に、スライドの選択でクリックします

remain = 4000;

マウスオーバーとマウスアウトについては前と同じ

于 2013-08-11T11:49:21.840 に答える