0

私はjQueryスライドショープラグインに取り組んでいます。私の方法の 1 つは、写真を前後に切り替えることです。私はそれを作成することにかなり成功しています。これは、特定のメソッドのこれまでのコードの孤立したケースです。

var images = $("#simpleslides").children("img");

$(".slideButtons ul li").on("click", "a", function() {

        var anchorIndex = $(this).parent().index();
        var $activeSlide = $("#simpleslides img:visible");
        var $targetSlide = $(images[anchorIndex]);

        if($activeSlide.attr("src") == $targetSlide.attr("src") || $targetSlide.is(":animated")) {

            return false;

        } else {

            $activeSlide.css({ "z-index" : 0 });
            $targetSlide.css({ "z-index" : 1 });

            $targetSlide.stop().fadeIn("slow", function() {

                $activeSlide.hide();

            });

        }

    });

動作中の動作を確認するためのフィドルを次に示します: http://jsfiddle.net/ase3E/

ほとんどの場合、これは期待どおりに機能します。ユーザーが対応する番号をクリックすると、画像がフェード インします。

ただし、すばやくクリックすると、ときどき飛び跳ねてhide、スライドが完全に表示されてしまうことがあります。フィドルをいじってみると、私が言及しているものがわかります。各画像をクリックして見てください。

stop問題を解決できると思ったものを採用しましたが、採用していません。hideコールバックの後にメソッドを配置しましたfadeInが、それでも状況は改善されませんでした。

ここで何が間違っていますか??

4

1 に答える 1

0

LIVE DEMO:)

var images = $("#simpleslides").find("img");
$(".slideButtons ul").on("click", "li", function(e) {
    e.preventDefault();
    var i = $(this).index();
    images.eq(i).stop().fadeTo(500,1).siblings('img').fadeTo(500,0);
});
于 2013-02-24T22:06:16.923 に答える