Question

我有两张照片。一个arrow_right.png和arrow_left.png。我想只显示一张照片。如果单击，则切换到另一张图片。你能用jQuery toggle()函数帮我解决这个问题吗？因为它隐藏了我的照片。

Answer 1

$('img').toggle(
    function () {
        $(this).attr('src', 'arrow_left.png');
    },
    function () {
        $(this).attr('src', 'arrow_right.png');
    }
);

.toggle()的文档：http://api.jquery.com/toggle

以下是演示：http://jsfiddle.net/dQZfh/

更新

您还可以使用.animate()或部分预构建动画为每张图片之间的更改设置动画：

$('img').toggle(
    function () {
        $(this).stop().fadeTo(250, 0, function () {
            $(this).attr('src', 'http://chachatelier.fr/programmation/images/mozodojo-mosaic-image.jpg').fadeTo(250, 1);
        });
    },
    function () {
        $(this).stop().fadeTo(250, 0, function () {
            $(this).attr('src', 'http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg').fadeTo(250, 1)
        });
    }
);

请注意，我使用fadeTo的回调函数仅在图像完全淡出后才更改源。

这是一个演示（淡出）：http://jsfiddle.net/dQZfh/1/

这是一个演示（幻灯片）：http://jsfiddle.net/dQZfh/2/

通过切换事件更改图片

1 个答案:

更新