js基础3衣服相册

最新推荐文章于 2024-11-01 15:19:31 发布

xwzj的小白

最新推荐文章于 2024-11-01 15:19:31 发布

阅读量244

点赞数

分类专栏： javascript js 文章标签： js html javascript

本文链接：https://blog.csdn.net/qq_43607916/article/details/108758911

版权

js 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

javascript

7 篇文章 0 订阅

订阅专栏

本文将介绍如何利用JavaScript创建一个动态展示衣服图片的相册，涵盖了HTML结构和JavaScript交互的基本应用。

摘要由CSDN通过智能技术生成

衣服相册

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>衣服相册</title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			ul{
				list-style: none;
				overflow: hidden;
			}
			ul li{
				float: left;
				width: 50px;
				height: 50px;
				margin-left:10px ;
				margin-top: 20px;
				border: 2px solid #fff;
			}
			ul li.active{
				border-color:red ;
			}
		</style>
	</head>
	<body>
		<img src="images/1.jpg" id="bigimg">
		<ul>
			<li class="active">
				<a href="">
					<img src="images/1.jpg" width="46" class="smallimg"> 
				</a>
			</li>
			<li>
				<a href="">
					<img src="images/2.jpg" width="46" class="smallimg" >
				</a>
			</li>
			<li>
				<a href="">
					<img src="images/3.jpg" width="90" class="smallimg">
				</a>
			</li>
			<li>
				<a href="">
					<img src="images/4.jpg" width="90" class="smallimg">
				</a>
			</li>
			<li>
				<a href="">
					<img src="images/5.jpg" width="46" class="smallimg">
				</a>
			</li>
		</ul>
		<script type="text/javascript">
			//1获取事件源
			var bigimg = document.getElementById('bigimg');
			var smallimgs=document.getElementsByClassName('smallimg');
			for(var i=0;i<smallimgs.length;i++)
			{
				//2遍历集合，给每个img标签添加事件
				smallimgs[i].onmouseover=function(){
					//事件处理程序
					//3.1在悬浮到每个li标签之前，先把所有的li标签的类名都置为空值
					for(var j=0;j<smallimgs.length;j++)
					{
						smallimgs[j].parentNode.parentNode.setAttribute('class','');
					}
					
					//3.2修改大图的src属性值
					var smallimgsrc = this.getAttribute('src');
					bigimg.setAttribute('src',smallimgsrc);
					//3.3给鼠标悬浮的img标签的父标签添加类
					this.parentNode.parentNode.setAttribute('class','active');
				}
			}
		</script>
	</body>
</html>