Question

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

现在，当我点击缩略图时，我想切换大图像和小缩略图图像，这样大图像容器现在有更大尺寸的缩略图，缩略图容器显示前大图像的缩略图视图。 / p>

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

如何用jquery切换图像？

2 个答案: