为什么用 jQuery 更改 img src 工作不正确？答案

【问题标题】：Why changing img src with jQuery works incorrectly?为什么用 jQuery 更改 img src 工作不正确？
【发布时间】：2015-06-06 12:34:17
【问题描述】：

嗯，任务是在点击时改变img src。

这样做没有问题。但我想在改变它的同时产生一些影响。所以，我使用了fadeOut 和fadeIn。问题是当 img src 发生变化时，img 开始“闪烁/闪烁”。

您可以在此处查看示例

http://www.coffee-cult.ru/slidersupreme （右上角的矩形激活滑块按钮）

还有代码，

$main_image = $("img").first();

$("#prev_slide").click(function(e) {
    e.preventDefault();
    $main_image.fadeOut(400, function() {
        $main_image.attr('src', images[0]);
    }).fadeIn(400);
});

$("#next_slide").click(function(e) {
    e.preventDefault();
    $main_image.fadeOut(400, function() {
        $main_image.attr('src', images[1]);
    }).fadeIn(400);
});

【问题讨论】：

标签： javascript jquery html jquery-ui

【解决方案1】：

你可以尝试使用

$(this).attr();

而不是

 $main_image.attr();

【讨论】：

@Vlad 我认为 $('img') 选择器有问题，所以给你的第一个 img 你想要一个 ID id="first_image" 然后使用 $main_image = $("#first_image");而不是 $main_image = $("img").first(); ..

【解决方案2】：

它与页面上的其他脚本有关。在小提琴中，使用相同的代码看起来还不错：http://jsfiddle.net/ewyLcm0s/

var images = ['http://lorempixel.com/100/100/people/1','http://lorempixel.com/100/100/people/2'],
$main_image = $("img").first();

$("#prev_slide").click(function(e) {
    e.preventDefault();
    $main_image.fadeOut(400, function() {
        $(this).attr('src', images[0]).fadeIn(400);
    });
});

$("#next_slide").click(function(e) {
    e.preventDefault();
    $main_image.fadeOut(400, function() {
        $(this).attr('src', images[1]).fadeIn(400);
    });
});

【讨论】：