javascript - 使用 jquery 和 javascript 构建 slider

Question

我使用 jquery 构建了 slider ，但它非常愚蠢。你可以看到: http://jsfiddle.net/Bf2Mv/ 我认为问题出在这里:

$(".img img").fadeOut().attr("src", images[count % images.length]).fadeIn();
$(".text").fadeOut().html(text[textcount % text.length]).fadeIn();

如何修复效果？ 非常感谢!

Answer 1

您可能想要这样的东西:

JSFiddle:http://jsfiddle.net/TrueBlueAussie/Bf2Mv/7/

    count = 0,
    text = [
        "first img desc",
        "2nd img desc",
        "3rd img desc"],
    imageCount = images.length,
    rand = 6000;

    function slide() {
        changeImage(1)
        rand = 6000;
    }

    function changeImage(delta) {
        count += delta;
        if (count < 0) count = imageCount - 1;
        count %= imageCount;
        $(".img img").fadeOut(function () {
            $(this).attr("src", images[count]).fadeIn()
        });
        $(".text").fadeOut(function () {
            $(this).html(text[count]).fadeIn();
        });
    }

    (function loop() {
        setTimeout(function () {
            slide();
            loop();
        }, rand);
    }());

    $("#next").click(function () {
        changeImage(1);
    });

    $("#prev").click(function () {
        changeImage(-1);
    });

注释:

1. 如果图像和文本数组的长度相同，则只需要一个计数器。
2. 如果索引管理正确(在 0 和 length-1 之间)，则不需要到处都有模数运算符
3. 您需要正确地从 0 绕到 length-1，然后再反向绕回。
4. 您需要在淡出后更改图像(因此淡出时有新的回调)
5. 我重构了更改代码，因此它只需要一个方向增量值。这样，计时器、下一个和上一个选项就可以重用相同的代码。