jQuery 美女画廊案例

最新推荐文章于 2022-11-19 23:57:00 发布

豆皮没有豆

最新推荐文章于 2022-11-19 23:57:00 发布

阅读量1k

点赞数 1

分类专栏： JQuery 文章标签： jQuery美女画廊案例

本文链接：https://blog.csdn.net/qq_43434300/article/details/88992099

版权

JQuery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
	            background-color: #666;
	        }
	        #dv {
	            margin: 0 200px;
	        }
	        #dv a img{
	            /*float: left;*/
	            width: 200px;
	            height: 100px;
	        }
	        .image {
	            width: 820px;
	            height: 460px;
	            margin: 0 200px;
	        }
	        p{
	            margin: 0 200px;
	        }
		</style>
		<!--<script type="text/javascript">
			function my$(id){
		        return document.getElementById(id);
		    }
		 
		    window.onload=function () {
		        var abq=my$("dv").getElementsByTagName("a");
		        for (i=0;i<abq.length;i++){
		            abq[i].onclick=function () {
		                document.getElementsByClassName("image")[0].src=this.href;
		                document.getElementsByTagName("p")[0].innerText=this.title;
		                return false;
		            }
		        }
		    }
		</script>-->
		<!--<script type="text/javascript">
		    window.onload=function(){
		    	var pho=document.getElementById('dv').getElementsByTagName('a');
		    	for(var i=0;i<pho.length;i++){
			    	pho[i].onclick=function(){
			    		document.getElementsByClassName("image")[0].src=this.href;
		                document.getElementsByTagName("p")[0].innerText=this.title;
		                return false;
			    	}
		    	}
		    }
		</script>-->
		<script src="js/jquery-3.3.1.js"></script>
		<script>
			$(function(){
				$("a").click(function(){
					$(".image").attr("src",$(this).attr("href"));
					$("p").text($(this).attr("title"));
					return false;
				});
			});
		</script>
	</head>
	<body>
		<div id="dv">
	    	<h1>美女画廊</h1>
			<a href="imgs/1.jpg" title="美女1">
				<img src="imgs/1.1.jpg" alt="" title="美女A">
			</a>
			<a href="imgs/2.jpg" title="美女2">
				<img src="imgs/2.2.jpg" alt="" title="美女B">
				
			</a>
			<a href="imgs/3.jpg" title="美女3">
				<img src="imgs/3.3.jpg" alt="" title="美女C">
				
			</a>
			<a href="imgs/4.jpg" title="美女4">
				<img src="imgs/4.4.jpg" alt="" title="美女D">
				
			</a>
		</div>
		<br>
		<img src="imgs/1.1.1.jpg" alt="" class="image">
		<br>
		<p>选择一个图片</p>
	</body>
</html>

样图：
在这里插入图片描述