如何用js代碼實現圖片切換效果

時間 2019-11-07

原文原文鏈接

經過點擊按鈕，實現圖片的隱藏與顯現，切換。實現代碼：<style>
			
			.a{
				width: 300px;
				height: 300px;
				border: 1px solid black;
			}
			.b{
				width: 50px;
				height: 30px;
				float: left;
				cursor: pointer;
			}
			.c{
				width: 200px;
				height: 200px;
				position: relative;
				margin-top: 30px;
				margin-left: 0px;
			}
			.c1{
				width: 200px;
				height: 200px;
				position: absolute;
				left: 10px;
				bottom: 0px;
				
			}
		
		</style>
	</head>
	<body>
		<div class="a">
			<div class="b" onclick="show('a1')">11</div>
			<div class="b" onclick="show('a2')">22</div>
			<div class="b" onclick="show('a3')">33</div>
			<div class="c">
				<div id="a1" class="c1" style="background-color: #000000;"></div>
				<div id="a2" class="c1" style="background-color: red; " ></div>
				<div id="a3" class="c1" style="background-color: yellow; "></div>
			</div>	
			
		</div>
	</body>
</html>
<script>
	
	function show(de)
	{
		var d= document.getElementById(de);	
		
		var c= document.getElementsByClassName("c1");
		for(var i=0;i<c.length;i++)
		{
			c[i].style.display="none";
			
		}
		d.style.display="block";
	}
	 

</script>

相關標籤/搜索