美女画廊（点击上面的图片下面进行显示）

最新推荐文章于 2025-03-29 03:06:30 发布

Denial_learn

最新推荐文章于 2025-03-29 03:06:30 发布

阅读量4.4k

点赞数

分类专栏： html

本文链接：https://blog.youkuaiyun.com/Denial_learn/article/details/100989849

版权

html 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的美女图片画廊切换效果。当点击小图时，大图会更新为所选图片，并显示相应的标题。该效果利用了jQuery的属性获取和修改功能，通过简单的点击事件实现了图片的动态展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：
在这里插入图片描述

   <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script src="js/jquery-3.4.0.min.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript">
    			$(function(){
    				$("img").click(function(){
    					$("#img1").attr({"src":$(this).attr("src")});   //attr获取属性和修改属性以及添加属性
    					$("#p1").html($(this).attr("title"));
    				})
    			})
    		</script>
    		<style type="text/css">
    			#all{
    				margin: 50px auto;
    				/*border: 1px solid red;*/
    				width: 370px;
    			}
    			h2{
    				margin: auto;
    				text-align: center;
    			}
    			#all img{
    				width: 70px;
    				height: 100px;
    			}
    			#one img{
    				width: 370px;
    				height: 480px;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="all">
    			<h2>美女画廊</h2>
    			<img src="img/girl2.jpg" title="美女照片一"/>
    			<img src="img/girl3.jpg" title="美女照片二"/>
    			<img src="img/girl4.jpg" title="美女照片三"/>
    			<img src="img/girl5.jpg" title="美女照片四"/>
    			<img src="img/girl6.jpg" title="美女照片五"/>
    			<div id="one">
    				<img src="img/girl2.jpg" id="img1"/>
    				<p id="p1">喜欢么？</p>
    			</div>
    		</div>
    		
    	</body>
    </html>