<!---图集内容--->

            

           <div id="wrapper"> 

      

      <!--滚动看图-->

      <div id="picSlideWrap" class="clearfix">

        <div class="imgnav" id="imgnav">

          <div id="img"> 

  {dede:field name='imgurls' alt='图片输出区'}

            <li><img src='[field:imgsrc/]' id='bigimg' alt='[field:alttext /]' /></li>

            {/dede:field}

            <div id="front" title="上一张"><a href="javaScript:void(0)" class="pngFix"></a></div>

            <div id="next" title="下一张"><a href="javaScript:void(0)" class="pngFix"></a></div>

          </div>

          <div id="cbtn"> <div class="picSildeLeft">

  <img src="/skin/img/prev_off.png" alt="上一张"/></div>

<div class="picSildeRight">

<img src="/skin/img/next_off.png" alt="下一张"/></div>

            <div id="cSlideUl">

              <ul>

                {dede:field name='imgurls' alt='图片输出区'}

                <li><img src='[field:imgsrc/]' id='bigimg' alt='[field:alttext /]' /></li>

                {/dede:field}

              </ul>

            </div>

          </div>

        </div>

      </div>

      <!--end滚动看图--> 

      

    </div>

    <script type="text/javascript">

$(document).ready(function(){                          


var index=0;

var length=$("#img li").length;

var i=1;


//关键函数：通过控制i ，来显示图片

function showImg(i){

$("#img li").eq(i).stop(true,true).fadeIn(800).siblings("li").hide();

$("#cbtn li").eq(i).addClass("hov").siblings().removeClass("hov");

}


function slideNext(){

if(index >= 0 && index < length-1) {

++index;

showImg(index);

}else{

if(confirm("已经是最后一张,点击确定重新浏览！")){

showImg(0);

index=0;

aniPx=(length-4)*200+'px'; //所有图片数 - 可见图片数 * 每张的距离 = 最后一张滚动到第一张的距离

$("#cSlideUl ul").animate({ "left": "+="+aniPx },200);

i=1;

}

return false;

}

if(i<0 || i>length-4){

return false;

}  

$("#cSlideUl ul").animate({ "left": "-=200px" },200)

i++;

}


function slideFront(){

if(index >= 1 ) {

--index;

showImg(index);

}

if(i<2 || i>length+4){

return false;

}

$("#cSlideUl ul").animate({ "left": "+=200px" },200)

i--;

}

$("#img li").eq(0).show();

$("#cbtn li").eq(0).addClass("hov");

$("#cbtn tt").each(function(e){

var str=(e+1)+"/"+length;

$(this).html(str)

})


$(".picSildeRight,#next").click(function(){

slideNext();

});

$(".picSildeLeft,#front").click(function(){

slideFront();

});

$("#cbtn li").click(function(){

index  =  $("#cbtn li").index(this);

showImg(index);

});

$("#next,#front").hover(function(){

$(this).children("a").fadeIn();

},function(){

$(this).children("a").fadeOut();

});

});

</script> 


 <!---图集内容结束--->


/*图集样式*/


#picSlideWrap { }


.imgnav { position: relative; }


#img { z-index: 10; width:880px; height: 500px; position: relative; text-align: center; }


#img li { width:880px; height: 500px; display: none; }


#img li img { width:100%; height: 100%;  }


#front, #next { display: none; }


#cbtn { position: relative; height: 145px; margin-top: 10px; overflow:hidden; }


#cbtn ul { position: relative; width: 10000px; height: 145px; }


#cbtn ul li {float: left;margin: 0 5px;width: 186px;height: 140px;cursor: pointer;position: relative;overflow: hidden; border:2px #ccc solid;}


#cbtn ul li img { width: 100%; height:100%;  display: block; }


#cSlideUl { width: 800px; overflow: hidden; position: relative; margin: 0 auto; margin-left:40px; }


.picSildeLeft, .picSildeRight { cursor: pointer; position: absolute; top: 50%; width: 34px; height: 64px; margin-top: -32px; }


.picSildeLeft { left: 8px; }


.picSildeRight { right: 8px; }


#cbtn .hov{ border:2px #0C7454 solid;}

/*图集样式 end*/