利用js实现简单的图片切换

最新推荐文章于 2024-06-27 12:49:37 发布

ITnainiu

最新推荐文章于 2024-06-27 12:49:37 发布

阅读量403

点赞数 1

文章标签： js css html javascript

本文链接：https://blog.csdn.net/ITnainiu/article/details/105230100

版权

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#d1{
				margin: 0 auto;
				height: 500px;
				width: 800px;
				background-color: aliceblue;
				position: relative;
			}
			#d1 img{
				position: absolute;
				height: 80%;
				width: 80%;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				
			}
			#d2{
				margin: 0 auto;
				height: 100px;
				width: 800px;
				background-color: bisque;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			ul li{
				list-style: none;
				float: left;
				border: 2px black solid;
				margin-left: 5px;
				height: 80px;
				width: 100px;
				position: relative;
			}
			ul li img{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				width: 90%;
				height: 90%;
			}
			
		</style>
	</head>
	<body>
		<!-- 打图片显示 -->
		<div id="d1">
			<img src="img/图片切换2/t1.jpg" >
		
		</div>
		<!-- 点击小图片 -->
		<div id="d2">
			<ul>
				<li>
					<a href="img/图片切换2/t1.jpg">
						<img src="img/图片切换2/t1-s.jpg" >
					</a>
				</li>
				<li>
					<a href="img/图片切换2/t2.jpg">
						<img src="img/图片切换2/t2-s.jpg" >
					</a>
				</li>
				<li>
					<a href="img/图片切换2/t3.jpg">
						<img src="img/图片切换2/1.jpg" >
					</a>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		// 点击小图片  小图片在li中  获取所有li
		var lis = document.querySelectorAll("#d2 ul li");
		for(var i = 0 ; i < lis.length ; i++){
			var li = lis[i]; // 获取每一个li
			li.onclick = function(){ //给每一个li加一个单机效果
				
				var a = this; //this  你点击的那个li
				//所有的li都变成黑色
				for(var i = 0 ; i < lis.length ; i++){
					var li = lis[i];
					li.style.borderColor = "black";
					li.style.height="80px"
					li.style.width="100px"
				}
				//点击的这个变成红色
				this.style.borderColor = "red";
				this.style.height="90px"
				this.style.width="110px"
				//取出a标签的href值  存放了 大图片的路径
				var a = this.getElementsByTagName("a")[0];
				var href_value = a.href;
				//将大图片的路径写入到显示大图片的那个img的src中
				document.getElementById("d1").getElementsByTagName("img")[0].src = href_value;
				//阻止 超链接的 默认行为
				return false;
			}
		}
	</script>
</html>