一款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>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791