通过js编写程序：点击对应按钮切换对应图片

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

啊～哈

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

阅读量862

点赞数

文章标签： javascript 开发语言 html5

本文链接：https://blog.csdn.net/m0_49014420/article/details/133714939

版权

1、效果

2、html代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="./css/index.css"/>
</head>
<body>
		<!-- 存放图片的div -->
		<div class="Img">
			<img src="./img/1.png" alt="">
		</div>
		<!-- 按钮 -->
		<ul class="Nav">
			<li class="Box" onclick="Li(this)">你真</li>
			<li class="Box" onclick="Li(this)">是一</li>
			<li class="Box" onclick="Li(this)">个大</li>
			<li class="Box" onclick="Li(this)">聪明</li>
			<li class="Box" onclick="Li(this)">丫丫</li>
		</ul>
	</body>
	<!-- 引用的js文件路径 -->
	<script type="text/javascript" src="./js/index.js"></script>
</html>

3、css源码

*{
	margin: 0;
	padding: 0;
	list-style: none;
}
body{
	background-color: #fe5c2b;
}
.Img{
	margin: 0 auto;
	height: 500px;
	width: 1050px;
	margin-top: 100px;
}
.Nav{
	height:100px;
	width: 1000px;
	margin-top: 45px;
	margin: 45px auto;
	overflow: hidden;
}
.Nav>li{
	float: left;
	width: 194px;
	height: 100px;
	margin-left: 5px;
	line-height: 80px;
	text-align: center;
	font-size: 20px;
	color: #c33506;
	font-weight: bold;
	background-color: #c8c8c8;
	opacity: 0.5;
	cursor: pointer;
	position: relative;
	bottom: -20px;
	transition: all .3s;
	border-radius: 5px;
}

3、js源码

	let img=document.querySelector('img')
	let ul=document.querySelector('ul')
	for(let i=0;i<ul.children.length;i++){
		 let index=i+1;//设置定义值做准备
		 //给按钮分别设置index下标
		 ul.children[i].setAttribute("index",index);
		 ul.children[i].addEventListener('click',function(){
			//因为图片和index有关系所以就这样设置了
		 console.log(this.getAttribute('index'));
		 img.src="./img/"+this.getAttribute('index')+".png";
		 })
		}
		//按钮变化效果
		function Li(on) {
			let num=-15;
			let Cls=document.getElementsByClassName("Box");
			for(let i=0;i<Cls.length;i++){
				if(on!=Cls[i]){
          Cls[i].style.marginTop="0px"
        }else{
          on.style.marginTop=num+"px"
        }
			}
		}

有很多方法都能实现这个效果，本来想把图片存放在数组，通过数字控制图片的改变，结果图片路径一直报错就采用了这个方法。