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

html布局如下：

<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>

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

  <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>

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