缩略图到图像交换onclick
提问于 2011-12-21 07:18:43
我正在尝试建立一个简单的图片库。
我在中间有一张大图和两个缩略图，一个在左上角，一个在右下角。
<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> 我猜你有三张大图，其中一张是可见的，另外两张大图隐藏在后面。当你点击缩略图时，它会调出放大的版本，并将缩略图与上一张大图互换。
谢谢你的帮助。
回答 1
Stack Overflow用户
回答已采纳
发布于 2011-12-21 07:42:52
Offtopic:总是尝试在要从jquery引用的元素上使用it，这会极大地提高性能。
但是，你所要求的是我会这样做...
标记：
<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...
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8586275
复制相关文章
腾讯云开发者
