使用jQuery更改图像源

我的DOM看起来像这样:

当有人点击图像上,我希望图像SRC切换到其中x表示图像编号1或2.

这是可能的还是我必须使用CSS来更改图像？

1> jonstjohn..：

---

您可以使用jQuery的attr()函数.例如,如果您的img代码的id属性为"my_image",则执行以下操作:

然后你可以src用这样的jQuery 改变你的图像:

$("#my_image").attr("src","second.jpg");

要将此附加到click事件,您可以写:

$('#my_image').on({
    'click': function(){
        $('#my_image').attr('src','second.jpg');
    }
});

要旋转图像,您可以这样做:

$('img').on({
    'click': function() {
         var src = ($(this).attr('src') === 'img1_on.jpg')
            ? 'img2_on.jpg'
            : 'img1_on.jpg';
         $(this).attr('src', src);
    }
});

---

你应该***真的把这个标记为答案男人!不能比这更好......

2> Mohsen..：

---

人们在更改图像源时常犯的错误之一就是不等待图像加载来执行后续操作,如成熟图像大小等.您需要使用jQuery .load()方法在图像加载后执行操作.

$('yourimageselector').attr('src', 'newsrc').load(function(){
    this.width;   // Note: $(this).width() will not work for in memory images

});

编辑原因:https://stackoverflow.com/a/670433/561545

3> 小智..：

---

欲获得更多信息.我尝试使用以下语法在jquery中为广告图像设置src属性和attr方法:$("#myid").attr('src', '/images/sample.gif');

这个解决方案很有用,但是如果改变路径也改变了图像的路径而不工作.

我一直在寻找解决这个问题的方法,但一无所获.

解决方案是将'\'放在路径的开头: $("#myid").attr('src', '\images/sample.gif');

这个技巧对我来说非常有用,我希望它对其他人有用.

4> Peter Ajtai..：

---

我将向您展示如何更改图像src,以便当您单击图像时,它会旋转HTML中的所有图像(特别是您的d1ID和c1类中)... 您的HTML中是否有2个或更多图像.

我还将向您展示如何在文档准备好后清理页面,以便最初只显示一个图像.

完整的代码

$(function() {

    var $images = $("#d1 > .c1 > a").clone();  

    var $length = $images.length;
    var $imgShow = 0;

    $("#d1 > .c1").html( $("#d1 > .c1 > a:first") );  

    $("#d1 > .c1 > a").click(function(event) { 

        $(this).children().attr("src", 
                        $("img", $images).eq(++$imgShow % $length).attr("src") );
        event.preventDefault();

    });
});

细分

创建包含图像的链接的副本(注意:您还可以使用链接的href属性来添加功能...例如,在每个图像下方显示工作链接):

    var $images = $("#d1 > .c1 > a").clone();  ;

检查HTML中有多少图像,并创建一个变量来跟踪显示的图像:

var $length = $images.length;
var $imgShow = 0;

修改文档的HTML,以便仅显示第一个图像.删除所有其他图像.

$("#d1 > .c1").html( $("#d1 > .c1 > a:first") ); 

绑定一个函数来处理单击图像链接的时间.

    $("#d1 > .c1 > a").click(function(event) { 
        $(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") );
        event.preventDefault();
    });

上面代码的核心是++$imgShow % $length用于遍历包含图像的jQuery对象.++$imgShow % $length首先将我们的计数器增加1,然后根据有多少图像来修改该数字.这将使结果索引从0to 循环length-1,这是$images对象的索引.这意味着此代码将使用2,3,5,10或100个图像...按顺序循环显示每个图像,并在到达最后一个图像时在第一个图像处重新启动.

另外,.attr()用于获取和设置图像的"src"属性.为了从$images对象中选择元素,我使用表单设置$images为jQuery上下文$(selector, context).然后我用我.eq()选择具有我感兴趣的特定索引的元素.

---

jsFiddle示例有3张图片

您还可以将srcs 存储在数组中.
jsFiddle示例有3张图片

以下是如何将锚点标签中的hrefs合并到图像周围:
jsFiddle示例

5> 小智..：

---

如果不仅有jQuery或其他资源查杀框架 - 每个用户每次只需要为一个简单的技巧下载许多kb - 而且还有本机JavaScript(!):

这可以写成一般而且更优雅:

6> Zeeshan..：

---

希望这可行