js---循环语句应用——实现点击右侧小图切换大图

本文链接：https://blog.csdn.net/m0_49623851/article/details/121276013
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <style>
		.box{
			width: 800px;
			height: 500px;
			/* border: #000000 solid 1px; */
		}	
		.div{
			height:450px;
			width:650px;
			margin-top: 20px;
			transition: all 2s;
			position: absolute;
		}
		#btn{
			width:100px;
			height:100px;
			z-index: 4;
			position: fixed;
			top:35px;
			left:700px;
		 }
		  #div0
		  {
			  background:url("images/mmexport1589972503233.jpeg") no-repeat center;
			  /*opacity: 0;*/
		  }
		  #div1
		  {
			  background:url("images/mmexport1589972500871.jpeg")no-repeat center;
			  opacity: 0;
		  }
		  #div2
		  {
			  background:url("images/mmexport1589972390659.jpeg")no-repeat center;
			  opacity: 0;
		  }
		  #div3
		  {
			  background:url("images/mmexport1589972420323.jpeg")no-repeat center;
			  opacity: 0;
		  }
		  #div4
		  {
			  background:url("images/mmexport1589972441129.jpeg")no-repeat center;
			  opacity: 0;
		  }
	</style>
	</head>
	<body>
	<div class="box">
		<div id="btn">
		  <button id="bn0"><img src="images/mmexport1589972503233.jpeg" alt="" style="width:80px;height:80px;"> </button>
		  <button id="bn1"><img src="images/mmexport1589972500871.jpeg" alt="" style="width:80px;height:80px;"></button>
		  <button id="bn2"><img src="images/mmexport1589972390659.jpeg" alt="" style="width:80px;height:80px;"></button>
		  <button id="bn3"><img src="images/mmexport1589972420323.jpeg" alt="" style="width:80px;height:80px;"></button>
		  <button id="bn4"><img src="images/mmexport1589972441129.jpeg" alt="" style="width:80px;height:80px;"></button>
		</div>
		
		  <div id="div0" class="div"></div>
		  <div id="div1" class="div"></div>
		  <div id="div2" class="div"></div>
		  <div id="div3" class="div"></div>
		  <div id="div4" class="div"></div>
	</div>
	
	
	  <script>
	      var bn0=document.getElementById("bn0");
	      var bn1=document.getElementById("bn1");
	      var bn2=document.getElementById("bn2");
	      var bn3=document.getElementById("bn3");
	      var bn4=document.getElementById("bn4");
	
	      var div0=document.getElementById("div0");
	      var div1=document.getElementById("div1");
	      var div2=document.getElementById("div2");
	      var div3=document.getElementById("div3");
	      var div4=document.getElementById("div4");
	      var pre;
	      bn0.onclick=function () {
	          setPage(bn0);
	      };
	      bn1.onclick=function () {
	          setPage(bn1);
	      };
	      bn2.onclick=function () {
	          setPage(bn2);
	      };
	      bn3.onclick=function () {
	          setPage(bn3);
	      };
	      bn4.onclick=function () {
	          setPage(bn4);
	      };
	      function setPage(bn) {
	          if (pre) {
	              pre.style.opacity = 0;
	          }
	          switch (bn) {
	              case bn0:
	                  div0.style.opacity = 1;
	                  pre = div0;
	                  break;
	              case bn1:
	                  div1.style.opacity = 1;
	                  pre = div1;
	                  break;
	              case bn2:
	                  div2.style.opacity = 1;
	                  pre = div2;
	                  break;
	              case bn3:
	                  div3.style.opacity = 1;
	                  pre = div3;
	                  break;
	              case bn4:
	                  div4.style.opacity = 1;
	                  pre = div4;
	                  break;
	          }
	      }
	      </script>
	</body>
	</html>