0

jQueryを可能な限り生で作成し、大量のjQueryプラグインがスタックしてページの速度が低下しないようにした後の日々、私は独自のスライダーを作成しようとしています。

私はこれまでのところどこまで進んだかというフィドルを作成しました。

私のHTMLマークアップは動的ではなく、スライドのアニメーション化プロセスは位置のみです。


私が抱えている問題は、次のアニメーションを開始する前にアニメーションを完全に実行する必要があることです。これにより、メニューロットにカーソルを合わせると、アニメーションがキューに入れられ始めます。

ホバーが変更された場合でも途中で停止し、自動的に次のアニメーション位置に実行するアニメーションが必要です。これが理にかなっていることを願って、あなたは私がフィドルで何を意味するかを見るでしょう。

また、アニメーションを各スライドと2000ミリ秒で自動的に実行したいのですが、スライド自体にカーソルを合わせると、一時停止したいと思います。

私は誰かにカスタムスライダースクリプトを書いてくれるように頼んでいることは知っていますが、プラグインなしで生のスクリプトがどのように書かれているかを見るのはとても便利で直感的です。

スライダーを軽量にする必要があるため、余分なマークアップは生成されません。私が試したすべてのプラグインのように、重くて多すぎます。私はプレーンなjqueryが好きです。


どんな助けでもすっごくいただければ幸いです。ありがとう


最新のjQueryを使用した私のミニチュアフィドルの例をご覧ください。

http://jsfiddle.net/EYDtF/

ここに画像の説明を入力してください

4

2 に答える 2

1

ずさんですが、始めるのに役立つかもしれません

var banners = $('.banner-slides'),
controls = $('.banner-menu'),
cycle = true,
current = 0;

doCycle();

controls.find('li').hover(function() {

    controls.children().removeClass('hover');
    $(this).addClass('hover');

    animate($(this).index());

    cycle = false;
}, function() {

    cycle = true;
});

function doCycle() {

    if (cycle) {

        if (controls.find('.hover').length > 0) {

            if (controls.find('.hover').next().length > 0) {

                var next = controls.find('.hover').next();

                controls.children().removeClass('hover');
                next.addClass('hover');

                animate(current);
            }
            else {

                controls.children().removeClass('hover');
                controls.children().first().addClass('hover');

                animate(0);
            }
        }
        else {

            controls.children().first().addClass('hover');

            animate(0);
        }
    }

    setTimeout(doCycle, 2000);
}

function animate(pos) {

    banners.stop().animate({top: pos * -200});

    current = pos + 1;
}

http://jsfiddle.net/imoda/EYDtF/5/

于 2012-06-26T18:03:43.220 に答える
0

気に入らないこれらのプラグインがどのように機能するかを確認する必要があります。現時点では、関数をホバーするとIDがターゲットになります。クラスをターゲットにすると、コードの量がすぐに減ります。

$('.hover').hover(function(){

$bannerSlide.animate({
        'top' : var                   
    });

});

次に、コードを減らした位置（var）をそれに渡す方法を考え出すことができます。

于 2012-06-26T17:31:53.363 に答える