jq写的缩略图点击显示大图且可实现透明原图切换（简单法）

最新推荐文章于 2020-09-28 04:43:44 发布

我想吃烤肉肉

最新推荐文章于 2020-09-28 04:43:44 发布

阅读量493

点赞数

分类专栏： jq 文章标签： jquery html

本文链接：https://blog.youkuaiyun.com/DZY_hungry/article/details/107970554

版权

jq 专栏收录该内容

2 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片显示</title>
		<script type="text/javascript" src="jquery.js"></script>
		<style>
			body,html{
				height: 100%;
				width: 100%;
			}
			.showPic{
				width: 30%;
				height: 60%;
				position: absolute;
			}
			.changeColor{
				cursor: pointer;
				position: absolute;
			}
			.pic{
				width: 100%;
				height: 100%;
				position: absolute;
			}
			.small{
				cursor: pointer;
				width: 30%;
				height: 10%;
				float: left;
				margin-top: 420px;
			}
			.small img{
				float: left;
				height: 100%;
				width: 25%;
			}
		</style>
	</head>
	<body>
		<div class="showPic">
			<img src="bear.jpg" class="pic">
			<button class="changeColor">点击变亮</button>
		</div>
		<div class="small">
			<img src="bear.jpg" id="choice" />
			<img src="bear1.jpg" id="choice1" />
			<img src="bear2.jpg" id="choice2"/>
			<img src="bear3.jpg" id="choice3"/>
		</div>
		            
		<script>
			$(document).ready(function(){
				$('.changeColor').click(function(){
					let btn = $('.changeColor').text();
					if(btn == '点击变暗'){
					   $('.changeColor').text('点击变亮');
					   $('.pic').css('opacity','1');
					}else if(btn == '点击变亮'){
					   $('.changeColor').text('点击变暗');
					   $('.pic').css('opacity','0.3');
					}	
				})
				$('#choice').click(function(){
					$('.pic').attr("src", "bear.jpg"); 
				})
				$('#choice1').click(function(){
					$('.pic').attr("src", "bear1.jpg"); 
				})
				$('#choice2').click(function(){
					$('.pic').attr("src", "bear2.jpg"); 
				})
				$('#choice3').click(function(){
					$('.pic').attr("src", "bear3.jpg"); 
				})
			})	
		</script>
	</body>
</html>