webAPI03-4风景相册

最新推荐文章于 2023-02-16 18:50:02 发布

雨乐无穷

最新推荐文章于 2023-02-16 18:50:02 发布

阅读量190

点赞数

分类专栏： JavaScript学习笔记

JavaScript学习笔记专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>风景相册</title>
		<style type="text/css">
			body{
				padding: 120px 200px;
			}
			#imagesgallery a{
				display: block;
				margin-bottom: 10px;
			}
			#imagesgallery{
				float: left;
			}
			#show{
				float: left;
				margin-left: 30px;
				width: 800px;
				height: 550px;
			}
			#des{
				text-align: center;
				line-height: 500px;
			}
			#show img{
				width: 100%;
			}
		</style>
	</head>
	<body>
		<p>风景画</p>
		<div id="imagesgallery">
			<a href="img/1.jpg" title="风景A"><img src="img/1-s.jpg" alt="风景A"/></a>
			<a href="img/2.jpg" title="风景B"><img src="img/2-s.jpg" alt="风景B"/></a>
			<a href="img/3.jpg" title="风景C"><img src="img/3-s.jpg" alt="风景C"/></a>
			<a href="img/1.jpg" title="风景D"><img src="img/1-s.jpg" alt="风景D"/></a>
			<a href="img/2.jpg" title="风景B"><img src="img/2-s.jpg" alt="风景B"/></a>
			<a href="img/3.jpg" title="风景C"><img src="img/3-s.jpg" alt="风景C"/></a>
		</div>
		<div >
			<img id="show" />
			<p id="des">请选择一张风景画</p>
		</div>
		
		
		
		
		
		
		
		<script type="text/javascript">
			
			//获取点击的a元素
			var imagesgallery = document.getElementById('imagesgallery');
			var links = imagesgallery.getElementsByTagName('a');
			
			
			//遍历每一个a元素
			for( var i = 0; i < links.length; i++){
				var lik = links[i];
				
				//给每个a注册点击事件
				lik.onclick = function(){
					
					//获取要展示的大图的img标签
					
					var show = document.getElementById('show');
					
					//将当前点击的小图对应的大图的路径替换给展示的大图的src属性
					show.src = this.href;
					
					//获取要展示文字的p标签
					
					var des = document.getElementById('des');
					
					//将当前点击的a标签的title属性值在p标签中展示出来
					des.innerText = this.title;
					
					//取消a标签的默认行为
					return false;
					
					
				}
				
			}
		</script>
		
		
	</body>
</html>