Question

我正试图绕过一个简单的图片库。

我的中心有一个大图像和两个缩略图，一个在左上角，一个在右下角。

<div class="images_gallery">
    <div class="small_top_left thumbnail"> <a href="#triggerlarge"></a><img src="small_top_A.jpg"/></div>

        <div class="large middle visible"><img src="large_imageC.jpg"></div>
        <div class="large middle hidden"><img src="large_imageA.jpg"></div>
        <div class="large middle hidden"><img src="large_imageB.jpg"></div>

    <div class="small_bottom_right thumbnail"> <a href="#triggerlarge"></a><img src="small_bottom_B.jpg"/></div>    
</div>

我猜你有三个大图像，一个是可见的，另外两个大图像隐藏在它后面。当您单击缩略图时，它会显示其较大的版本，并使用上一个大图像交换缩略图。

感谢您的帮助。

Answer 1

Offtopic：总是尝试对要从jquery引用的元素使用id，它会显着提高性能。

但是，你问的是我会这样做......

标记：

 <div id="images_gallery">
  <div class="small_top_left thumbnail"><img src="small_A.jpg" data-image='A'/></div>

    <div class="large middle"><img src="large_imageC.jpg" data-image='C'></div>
 <div class="small_bottom_right thumbnail"> <img src="small_B.jpg" data-image='B'/></div>
 </div>

js：

 $(document).ready(function() {

     $("#images_gallery .thumbnail img").click(function() {

          var next_data = $("#images_gallery .large img").attr('data-image');
          var next_thumb = "small_" + next_data + ".jpg";

          var large_data = $(this).attr("data-image");
          var large = "large_image"+ large_data +".jpg";

          $("#images_gallery .large img").attr('src', large).attr('data-image', large_data);
          $(this).attr('src', next_thumb).attr('data-image', next_data); 
     });


});

调用图片small_A.jpg，small_B.jpg，small_C.jpg，和large_image_A.jpg ......

缩略图到图像交换onclick

1 个答案: