javascript - 如何更改 slider 中的图像 src？

Question

我有一张 slider 图片。我希望它在单击按钮后淡出到下一张图像。 JQuery 使图像淡入和淡出，以便在 src 更改时使过渡更清晰。然而，图像在褪色后保持不变。

HTML

    <button onclick = "prev()" id = "prev">Prev</button>
    <img id = "slider" src = "" height = "600px" width = "600px"/>
    <button onclick = "next()" id = "next">Next</button>

JQuery

    var images = ['', '', ''];
    var num = 0;

    function next() {
        var slider = $('#slider');
        num++;
        if(num >= images.length) {
            num = 0;
        }
        slider.fadeOut('slow', function() {
            slider.src = images[num];
            slider.fadeIn('slow');
        });
    }

    function prev() {
        var slider = $('#slider');
        num--;
        if(num < 0) {
            num = images.length-1;
        }
        slider.fadeOut('slow', function() {
            slider.src = images[num];
            slider.fadeIn('slow');
        });
    }

我已经删除了我测试过的图片，因为它们的链接太长了。三个 slider 图像将位于 JQuery“images”变量中，起始图像位于图像 src 中。

Answer 1

假设 images 是图像 URL 数组，那么您的错误是试图设置 slider.src 而不是 slider.attr('src, value );。

所以，改用这个:

slider.attr('src', images[num]);