如何使用jquery切换图像？

我有一个简单的设置与一个大图像容器和3个较小的缩略图容器。如何使用jquery切换图像？

现在，当我点击缩略图时，我想切换大图像和小缩略图图像，以便大图像容器现在具有更大尺寸的缩略图，并且缩略图容器显示前大图像的缩略图视图。

<div class="thumbnailFloat"> 
    <img src="data/img_2.jpg" width="60" > 
    <img src="data/img_3.jpg" width="60" > 
    <img src="data/img_4.jpg" width="60" > 
</div> 

<div class="imageFloat"> 
    <img src="data/img_1.jpg" width="180" height="250"> 
</div>

感谢您的帮助。您使用的ID为大图像

我建议：

来源

2010-04-29 eemceebee

试试这个未经测试的例子。

<div class="thumbnailFloat"> 
    <img src="data/img_2.jpg" width="60" > 
    <img src="data/img_3.jpg" width="60" > 
    <img src="data/img_4.jpg" width="60" > 
</div> 

<div class="imageFloat"> 
    <img id="bigImage" src="data/img_1.jpg" width="180" height="250"> 
</div>

$(function() { 
    $('.thumbnailFloat img').click(function() { 
     var oldSource = $('#bigImage').attr('src'); 
     var newSource = $(this).attr('src'); 
     $(this).attr('src', oldSource); 
     $('#bigImage').attr('src', newSource); 
    }); 
});

来源

2010-04-29 13:42:55

还有什么需要做的？导致点击不会做任何事情？！（...是的，我加了jquery.js） – eemceebee 2010-04-29 13:52:01

我更新了代码。 – 2010-04-29 13:53:31

$(function() { 
    $("div.thumbnailFloat img").click(function() { 

     var thumbElement = $(this); 
     var imageElement = $("div.imageFloat img"); 

     // Capture the src of the thumbnail we clicked. 
     var thumbSrc = thumbElement.attr('src'); 
     var imageSrc = imageElement.attr('src'); 

     // and now swap the image src attributes 
     imageElement.attr('src', thumbSrc); 
     thumbElement.attr('src', imageSrc); 

    } 
});

如果你在生产这样做，你可能还需要优化在不同的文件夹图片的缩略图和全尺寸的版本，在这种情况下，您需要修改SRC属性如下：

var thumbSrc = thumbElement.attr('src').replace('/thumbs/', '/images/');

来源

2010-04-29 13:53:35

如何使用jquery切换图像？

回答

相关问题