在一个 ec 论坛看到的一个效果，感觉很赞，就把代码给拷贝下来了，这是商品详情页面的图片展示效果，左侧是小图的移动，可以上下点击移动的，然后右侧则是大图的显示，感觉这种效果很好，下面是小虎博客摘集来的代码，分享一下了，代码如下:

html布局如下：

[code lang="php"]
<div class="goods-small-pic">
<div class="arrow">
<span class="scrtop"></span>
</div>
<div class="gallery">
<div id="demo" style="width:100%!important; margin:0 auto;">
<div id="demo1" style="width:100%!important; margin:0 auto; overflow:hidden;position:relative; height:420px; margin-bottom:5px;">
<ul id="goods_gallery" style="width:100%; height:300%; position:absolute; left:0; top:0;">
<!-- {foreach from=$pictures item=picture}-->
<li class="pic_li">
<a href="{$picture.img_url}" rev={$picture.img_url} rel=goodsPic>
<img src="{if $picture.thumb_url}{$picture.thumb_url}{else}{$picture.img_url}{/if}" alt="{$goods.goods_name}" />
</a>
</li>
<!--{/foreach}-->
</ul>
</div>
</div>
</div>
<div class="arrow">
<span class="scrbottom spanR" ></span>
</div>
</div>
[/code]

对应的jquery效果，当图片到第一张和最后一张时按钮的背景图会变化.

[code lang="php"]
<script>
//相册控制
function goods_gallery_control(){
var num01=0;
var gg_lis = $('#demo1 #goods_gallery li').length;
if(gg_lis>5){
$('.scrbottom,.scrtop,#picIdxBox .arrow').show();
$('.scrbottom').css('background-position','center -30px');
}else{
$('#picIdxBox .arrow').hide();
}
$('.scrbottom').click(function(){
num01++;
$('.scrtop').css('background-position','center -20px');
if(num01==(gg_lis-5)){
$('.scrbottom').css('background-position','center -10px');
}
if(num01>(gg_lis-5)){
num01=gg_lis-5;
}
$('#goods_gallery').animate({top:-num01*85},500);
})
$('.scrtop').click(function(){
num01--;
if(num01==0){
$('.scrbottom').css('background-position','center -30px');
$('.scrtop').css('background-position','center top');
}
if(num01<0){
num01=0;
}
$('#goods_gallery').animate({top:-num01*85},500);
})
}
goods_gallery_control();
</script>
[/code]

实例的效果图就不截了，有想要把 ec 系统商品页面做得很炫的时候可以使用这种实例了，顺便再说一下，话说这样的效果网上有许多的，我们可以多下一些这样的效果，然后对照入座，整合到模板里面就可以了。