图片nav

功能

点击图片修改图片src，点击其他图片时图片还原src

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
				list-style: none;
				text-decoration: none;
			}

			ul {
				display: flex;
				justify-content: center;
				margin-top: 50px;
			}

			ul li {
				width: 154px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<ul>
			<li class="nav-img item">
				<img src="img/img01.png" stimg="img/stimg01.png" onimg="img/img01.png" alt="">

			</li>
			<li class="item">
				<img src="img/img02.png" stimg="img/stimg02.png" onimg="img/img02.png" alt="">

			</li>
			<li class="item">
				<img src="img/img03.png" stimg="img/stimg03.png" onimg="img/img03.png" alt="">

			</li>
			<li class="item">
				<img src="img/img04.png" stimg="img/stimg04.png" onimg="img/img04.png" alt="">

			</li>
		</ul>
	</body>
	<script type="text/javascript">
		$(function() {
			$(".nav-img img").attr("src", $(".nav-img  img").attr("stimg")); //设置第一张图片默认样式
			$(".item").click(function() {
				$(".item").each(function() {
					$(this).find("img").attr("src", $(this).find("img").attr("onimg")); //获取图片的默认样式
				});
				$(this).find("img").attr("src", $(this).find("img").attr("stimg")); //点击时的图片样式
			})
		})
	</script>
</html>

运行图片
image

posted @ 2021-10-17 23:58  禾耳  阅读(50)  评论(0)    收藏  举报