jQuery垂直切换的商品展示图集【原创】

页面的head部分，先引入一个CSS样式文件，并设置好演示页面的元素样式，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css" />
<style>
* {
	padding: 0px;
	font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
}
#gallery {
    display: flex;
    width: 100%;
}
#gallery img {
	border: none;
}
#gallery_nav {
	flex: 1;
	text-align: center;
}
#gallery_nav a{
	display: block;height: 92px;
}
#gallery_output {
	flex: 5;
	overflow: hidden;
}
#gallery_output img {
	width: 100%;
    height: 410px;
    /* margin: 0px auto 0 auto; */
    padding: 7px;
}
.zz{
	border: 1px solid rgba(92,92,92,1.00);
}
</style>

接着引入jQuery库，设置好缩略图点击事件的响应，代码如下：

<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script language="javascript">
$(document).ready(function() {
	$("#gallery_output img").not(":first").hide();
	$("#gallery a").click(function() {
		$("#gallery a").removeClass('zz');
		$(this).addClass("zz");
		if ( $("#" + this.rel).is(":hidden") ) {
			$("#gallery_output img").slideUp();
			$("#" + this.rel).slideDown();
		}
	});
});
</script>

页面的body部分，将左侧缩略图和右侧大图放入不同的div容器里即可，代码如下：

<div id="content">
	<h1>jQuery垂直切换的商品展示图集</h1>
	<p>点击左侧缩略图，会在右侧显示大图。</p>
	<div id="gallery">
		<div id="gallery_nav">
			<a rel="img1" href="javascript:;"><img src="images/iphone_1.jpg" /></a>
			<a rel="img2" href="javascript:;"><img src="images/iphone_2.jpg" /></a>
			<a rel="img3" href="javascript:;"><img src="images/iphone_3.jpg" /></a>
			<a rel="img4" href="javascript:;"><img src="images/iphone_4.jpg" /></a>
		</div>
		<div id="gallery_output">
			<img id="img1" src="images/iphone_1b.jpg" />
			<img id="img2" src="images/iphone_2b.jpg" />
			<img id="img3" src="images/iphone_3b.jpg" />
			<img id="img4" src="images/iphone_4b.jpg" />
		</div>
		<div class="clear"></div>
	</div>
</div>