1

カスタム スライダーを作成しましたが、機能しません。ご案内いただけますでしょうか。

私のコード:

var mwth = 0;
var count = 0;
var wth = 0;
var twth = 0;

$(document).ready(function () {
    $('.box-wrap .box:odd').css("background", "#0C0");
    mwth = $('.box-wrap').width();
    count = $('.box-wrap .box').size();
    wth = $('.box-wrap .box').width();
    twth = (count) * (wth + 2)

    $('.box-wrap .box').wrapAll("<div class='slider-wp'>");
    $(".slider-wp").css("width", twth);


    for (i = 0; i < (twth / mwth); i++) {
        $(".box-wrap").append("<a href='#'>test</a>")
    }

    $(".box-wrap a").each(function (index, element) {
        $(this).click(function () {
            banner_slide((index) * 990);
            return;

        });
    });

    setInterval(banner_slider, 1000);


});

function banner_slide(i) {
    $(".slider-wp").animate({
        left: "-" + i + ""
    }, 1000).delay(1000);

}

function banner_slider(cnt) {
    twth = (count) * (wth + 2)
    var j = 1000;
    for (i = 0; i <= (twth - 990); i = i + 990) {
        j = j + 1000;
        $(".slider-wp").animate({
            left: "-" + i + ""
        }, 1000).delay(j);
    }
}

JSフィドル。

4

1 に答える 1

1

あなたの問題は、個々のフレームへのリンクをクリックすると、正しいフレームがアニメーション化されないという事実だと思います。

これが発生する理由は、スライダーのアニメーションを一度に数フレームずつ事前に計算しているように見えるためです。

for (i = 0; i <= (twth - 990); i = i + 990) {
    j = j + 1000;
    $(".slider-wp").animate({
        left: "-" + i + ""
    }, 1000).delay(j);
}

フレームごとに動作するようにアニメーション コードを変更すると、次のようになります。

var frame = 0;
function banner_slider(cnt){
    frame ++;
    if (frame > 4) frame = 0;    
    banner_slide(frame * 990);    
}

トラブルに巻き込まれることはありません。さらに、これは以前に同様のタスク用に作成した関数を使用します ( DRY )

動作を確認できるようにjsfiddleを作成しました。スライダー自体はまだ完全ではありません (行き詰まった場合は遠慮なく質問してください) が、これで差し迫った問題が解決され、問題が解決するはずです。幸運を！

于 2013-04-04T05:26:17.457 に答える