点击翻页图片展示功能

    //用一个全局的变量来记录当前是滚到第几页了
    var index=0;
   $('#anspan1').click(function () {
        //last
       //先计算里面有多少个li
      var itemCount=$('#small_imgs').children().length;
      //一页6个，不够6个的按照一页算，先计算一下总共有多少页
       var pageCount=Math.ceil(itemCount/6);
     //   li  宽度  * 6 个
       var scrollWidth=-92*6;
       //如果当前的index是1的话，last就是回去0

<div id="left">
    <span style="font-size:20px;" id="pic_name"></span>
    <div class="zzsc">
        <span class='zoom' id='#exx'> <img src='' width='100%'
                                          alt='图片加载中' id="showImage">
        </span>
    </div>
    <div class="img_container" id="magnifier1">
        <div id="wrapper">
            <ul id="small_imgs" class="animation03 clearfix">

            </ul>
        </div>
        <div id="slider_ctl" class="anniu magnifier-btn">
            <span data-control="last" id="anspan1" class="di"><</span>
            <span data-control="next" id="anspan2" class="di">></span>
        </div>
    </div>
</div>

 

//当前是 第二页  index=2  -scrollWidth*2   index=1  -scrollWidth*1
       if(index>0){
           index=index-1;
           $('#small_imgs').css('left',scrollWidth*index+'px' );

       }
   });
   $('#anspan2').click(function () {
       //next
       var itemCount=$('#small_imgs').children().length;
       //一页6个，不够6个的按照一页算，先计算一下总共有多少页
       var pageCount=Math.ceil(itemCount/6);
       //   li  宽度  * 6 个
       var scrollWidth=-92*6;
       if(index<pageCount-1){
          index=index+1;
           $('#small_imgs').css('left',scrollWidth*index+'px' );

       }
   });