gpt4 book ai didi

jquery - 单击缩略图时用不同的图像替换大图像(图库)

转载 作者:行者123 更新时间:2023-11-28 00:26:48 26 4
gpt4 key购买 nike

大家好。我的目标是为自己的新爱好摄影创建一个个人作品集网站。

目前一切就绪。 (这个可以看here。)

问题是,尽我所能,我无法在 CSS 中替换图像。我花了很长时间试图移动图像等,但它只是悲惨地失败了。我的新计划是使用 jQuery。

这就是我需要你的帮助的地方。我不了解 jQuery,我需要在单击时将大图像替换为缩略图中的图像。有点像按钮。这可能吗,你能帮我吗?非常感谢。

最佳答案

你可以像这样尝试一些 jQuery:

$(document).ready(function(){
$('.gallery img').click(function() {
var img = $(this).attr('src');
$('.content img').attr('src', img);
});
});

显然,您必须包含 jQuery core , 通常在 <head> 内您页面的标签:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

看看 demo here


对于您的缩略图,另一个不错的方法是将光标变成指针(使缩略图看起来可以点击) - 直接使用 CSS,或者让 jQuery 为您完成:

$(document).ready(function(){
$('.gallery img').click(function() {
var img = $(this).attr('src');
$('.content img').attr('src', img);
}).each(function() {
$(this).css('cursor', 'pointer');
});
});

看看 demo here

关于jquery - 单击缩略图时用不同的图像替换大图像(图库),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5317627/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com