web中js实现点击切换图片_web点击按钮切换图片-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43399648/article/details/90316334

博客介绍了在Web中利用JS实现点击切换图片的方式，还提到一种底部带文字且用到隐藏的实现情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个也是一种，底部带文字
用到了隐藏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a{
				text-decoration: none;
				color: black;
			}
			li{
				display: block;
				border: 1px gray solid;
				float: left;
				padding: 5px;
				padding-left: 17px;
				padding-right: 17px;
				font-family: "微软雅黑";
				border-bottom: none;
			}
			img{
				float: left;
				position: absolute;
				left: 48px;
				top:50px ;
			}
			p{
				position: absolute;
				left: 165px;
				top: 280px;
			}
		</style>
	</head>
	<body>
		<ul>
			<span><li><a href="#" onclick="aa(1)">热点</a></li></span>
			<span><li><a href="#" onclick="aa(2)">聚焦</a></li></span>
			<span><li><a href="#" onclick="aa(3)">天下</a></li></span>
			<span><li><a href="#" onclick="aa(4)">奇闻</a></li></span>
			<span><li><a href="#" onclick="aa(5)">军事</a></li></span>
			<div id="a1">
				<img src="img/1.jpg"/>
				<p>法国大选</p>
			</div>
			<div id="a2">
				<img src="img/2.jpg"/>
				<p>121</p>
			</div>
			<div id="a3">
				<img src="img/3.jpg"/>
				<p>123123123</p>
			</div>
			<div id="a4">
				<img src="img/4.jpg"/>
				<p>12312312312</p>
			</div>
			<div id="a5">
				<img src="img/5.jpg"/>
				<p>213123123</p>
			</div>
		</ul>
		<script type="text/javascript">
		var a=document.getElementsByTagName("div");
		for(i=1;i<a.length;i++)
			a[i].style.display="none";
		function aa(w){
			for(i=0;i<a.length;i++)
			a[i].style.display="none";
			
			a[w-1].style.display="block";
		}
			
			</script>
	</body>
</html>