jQuery案例：美女画廊

最新推荐文章于 2023-12-02 19:16:23 发布

原创最新推荐文章于 2023-12-02 19:16:23 发布 · 817 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

属性获取和设置专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的美女画廊案例，通过点击不同的缩略图，下方的大图和描述将相应更新。该案例展示了如何利用jQuery的属性获取和设置功能来实现交互效果。

下面是我用jQueryjQuery的属性的获取和设置写的一个小案例：美女画廊
html部分

<div id="dv">
   <h1>美女画廊</h1>
	<a href="img/1.jpg" title="美女A">
		<img src="img/1-small.jpg" alt="" title="美女A">
	</a>
	<a href="img/2.jpg" title="美女B">
		<img src="img/2-small.jpg" alt="" title="美女B">
		
	</a>
	<a href="img/3.jpg" title="美女C">
		<img src="img/3-small.jpg" alt="" title="美女C">
		
	</a>
	<a href="img/4.jpg" title="美女D">
		<img src="img/4-small.jpg" alt="" title="美女D">
		
	</a>
</div>
<br>
<img src="img/1.jpg" alt="" class="image">
<br>
<p>选择一个图片</p>

css部分

body {
    background-color: #666;
}
#dv {
    margin: 0 200px;
}
#dv a img{
    width: 200px;
    height: 100px;
}
.image {
    width: 820px;
    height: 360px;
    margin: 0 200px;
}
p{
    margin: 0 200px;
}

jQuery部分

<script src="./jquery-1.12.4.min.js"></script>
<script>
// 需求：点击目录栏的小图，下面的大图会随之发生改变
		// p标签里的文本也会发生对应改变
// 入口函数
$(function(){
	// 点击a标签包裹的图片
	$("a").click(function(){
		// 把下面的img标签里的路径设置成对应a标签的路径
		$(".image").attr("src",$(this).attr("href"));
		// 把p标签的文本设置成a标签的title属性值
		$("p").text($(this).attr("title"));
		return false;
	});
});
</script>