如何更改滑块中的图像 src？

Question

我有这张图片作为滑块。我希望它在单击按钮后淡入下一个图像。 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');
        });
    }

我已经取出了我测试它的图片，因为它们的链接太长了。三个滑块图像将位于 JQuery“图像”变量中，而起始图像位于图像 src 中。

Answer 1

假设images 是一组图片网址，那么您的错误是尝试设置slider.src 而不是slider.attr('src, value);。

所以，改用这个：

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