Hosy~Ye 的部落宅

jq实现图片大小切换

2018-01-31

img_banner

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="zxx_box">
	<div id="zxx_test_box">
		<h3 class="zxx_title">jQuery实现大小图片切换</h3>
		<div class="pic_small">
			<a href="#0"><img class="current" src="imgs/pro_1.jpg" /></a>
			<a href="#1"><img src="imgs/pro_2.jpg" /></a>
			<a href="#2"><img src="imgs/pro_3.jpg" /></a>
			<a href="#3"><img src="imgs/pro_4.jpg" /></a>
			<a href="#4"><img src="imgs/pro_5.jpg" /></a>
		</div>
		<div class="pic_chg_box">
			<ul class="pic_in_area" id="pic_chg_area">
				<li><img src="imgs/pro_1.jpg" /></li>
				<li><img src="imgs/pro_2.jpg" /></li>
				<li><img src="imgs/pro_3.jpg" /></li>
				<li><img src="imgs/pro_4.jpg" /></li>
				<li><img src="imgs/pro_5.jpg" /></li>
			</ul>
		</div>
	</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
#zxx_box {
	width: 800px;
	margin: 0 auto;
	border-left: 1px solid #ffffff;
	border-right: 1px solid white; 
}

#zxx_test_box {
	padding: 20px;
	border-left: 1px solid #cccccc;
	border-right: 1px solid #cccccc;
	background: white; 
}

.zxx_test_title {
	font-size: 150%;
	text-align: center;
	margin: 25px 0 20px; 
}

.pic_small {
	text-align: center; 
}

.pic_small img {
	width: 140px;
	height: 170px;
	padding: 3px; 
}

.pic_small img.current {
	padding: 2px;
	background: #ffffff;
	border: 1px solid #ff3300; 
}

.pic_chg_box {
	width: 700px;
	height: 552px;
	border: 3px solid #333333;
	margin: 20px 0 0 20px;
	position: relative;
	overflow: hidden; 
}

.pic_in_area {
	width: 3500px;
	text-align: center;
	margin: 0;
	padding: 0;
	list-style-type: none;
	position: absolute;
	left: 0;
	top: 20px; 
}

.pic_in_area li {
	display: table-cell;
	width: 700px;
	height: 512px;
}
.pic_in_area li img {
	vertical-align: middle;
}
1
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
	$(".pic_small").find("img").click(function(){
		$(".pic_small").find("img").not($(this)).removeClass("current");
		$(this).addClass("current");
		$(this).parent().blur();
		var picNum = parseInt($(this).parent().attr("href").slice(1));
		var movePos = ($('#pic_chg_area li').width()*(-picNum));
		$("#pic_chg_area").animate({left:movePos},500);
	});
});