如何用jquery切换图片？

Question

我有一个简单的设置，包含一个大图像容器和 3 个较小的缩略图容器。

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

    <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>

感谢您的帮助。

Answer 1

尝试这个未经测试的示例：

我建议您对大图像使用 ID。

<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 );
   });
});

Answer 2

$(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/');