0

まともなjQueryスライダーを探しています。移行段階で、画像がフェードアウトして非表示になり、次の画像にフェードインするようにしたいと思います。このように: http://i47.tinypic.com/6gygko.gif

現在、Plus Slider を使用していますが、トランジション中に画像を正確に隠すことはできません。代わりに、次の画像をロードし、2 番目の画像を表示しながら非表示にします。これを参照してください：http://jsfiddle.net/EgkFq

私が上で尋ねたことを実行するまともなスライダーを知っている人はいますか、少なくとも私が提案していることを実行するためのフィドルを助けてくれますか? また、画像は動的で背景が透明になります。

さらに、数字をクリックした場合にのみ遷移が機能するように、数字のページネーションが必要です。jQueryを使用して画像の数などを検出する必要があると言われました。

スクロールバーの問題以外は解決しました。http://jsfiddle.net/h7Y3F

4

2 に答える 2

1

選択できるスライダーはたくさんあります。70以上の素晴らしいjQueryスライダープラグインをご覧ください。それらのほとんどはフェージング効果があります。

于 2012-09-08T14:24:22.143 に答える
1

http://jsfiddle.net/EgkFq/5/

(function slider(){
    var slides = $("#slider > img");
    var currentIndex = 0;
    var slideCount = slides.length;
    var timePerSlide = 5000;
    var fadeDuration = 1000;

    var nextSlide = function(){
        var nextIndex = currentIndex + 1;
        if (nextIndex == slideCount)
            nextIndex = 0;

        $(slides[currentIndex ]).fadeOut(fadeDuration);
        $(slides[nextIndex ]).fadeIn(fadeDuration);

        currentIndex = nextIndex;
        setTimeout(nextSlide, timePerSlide);
    };

    setTimeout(nextSlide, timePerSlide);
})();

プラグイン shmugin。

「スライダー」内で画像を中央に配置する方法の例を次に示しますhttp://jsfiddle.net/EgkFq/9/

(function slider(){
    var slides = $("#slider > img");
    var currentIndex = -1;
    var slideCount = slides.length;
    var timePerSlide = 5000;
    var fadeDuration = 1000;

    var nextSlide = function(){
        var nextIndex = currentIndex + 1;
        if (nextIndex == slideCount)
            nextIndex = 0;

        var me = $(slides[currentIndex]);
        var nxt = $(slides[nextIndex]);

        var w = nxt.width();
        var h = nxt.height();        

        me.fadeOut(fadeDuration);
        nxt.fadeIn(fadeDuration);

        nxt.css({
            "left":"50%", 
            "margin-left":w/2 * -1, 
            "top":"50%", 
            "margin-top": h/2 * -1
        });


        currentIndex = nextIndex;
        setTimeout(nextSlide, timePerSlide);
    };

    setTimeout(nextSlide, 0);
})();
于 2012-09-07T21:02:04.710 に答える