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 回答