Question

我有一个滑块的图像。单击按钮后，我希望它淡入下一个图像。当src改变时，JQuery使图像淡入淡出以使转换更清晰。但是，褪色后图像保持不变。

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＆＃34;图像＆＃34;变量和图像src中的起始变量。

Answer 1

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

所以，请改用：

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

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

1 个答案: