Question

我已创建自定义滑块，但它不起作用，你们可以指导我吗。

我的代码：

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 fiddle

Answer 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，以便您可以看到它的实际效果。滑块本身远非完整（如果您遇到困难，请随时询问任何内容）但这应该可以解决您的问题并让您继续前进。祝你好运！

自定义滑块问题

1 个答案: