輪播圖

//css

/* 焦點圖下的專題圖片 */
.rotation{    overflow: hidden;}
.picbox{ width:100%; height:260px; overflow:hidden; position:relative;padding:0;}
.picbox li{ background:#eee; margin-right:10px; padding:5px; float:left;}


.piclist{ height:auto;position:absolute; left:0px; top:0px;}
.swaplist{ position:absolute; left:-3000px; top:0px;}
.og_prev,.og_next{ width:30px; height:50px; background:url(indeximg/images/icon.png) no-repeat; background:url(indeximg/images/icon_ie6.png) no-repeat\9; position:absolute; top:45%; z-index:99; cursor:pointer;filter:alpha(opacity=70); opacity:0.7;}
.og_prev{ background-position:0 -60px; left:4px;}
.og_next{ background-position:0 0; right:4px;}

//jsp

<!-- 基地圖片 -->
<div style="border:1px solid #ccc;margin:20px 30px;width:90%;">
<div class="rotation" style="position:relative;width:240px;height:auto;margin:10px 20px;" >
<div class="picbox">
<ul class="piclist mainlist J_traceBaseInfoImg">
</ul>
<ul class="piclist swaplist"></ul>
</div>
<div class="og_prev"></div>
<div class="og_next"></div>
</div>
   </div><br/>
<!-- 基地圖片結束 -->

//js

/**
 * obj 本處:".rotation"
 * 左右均可無限循環
 * 缺陷:num只能爲1 否則後退有問題 
 * @param obj
 */
function lunbo(obj){
var img_le;//單個圖片寬度
var screen_num=4;//圖片顯示區域數量
var num=1;//每次移動圖片個數 可設置
var max_num=5;//當圖片少於多少時 隱藏點擊按鈕
var stage=1;//狀態1:最後或最前一張圖片後 只能反向移動 ;狀態2:
 

linum = $(obj).find('.mainlist li').length;//圖片數量
img_le = parseInt($(obj).find('.mainlist li:eq(0)').outerWidth(true));//單個圖片寬度
screen_L=img_le*screen_num;//圖片顯示區域寬度
w = linum * img_le;//ul寬度
 console.log("li寬:"+img_le+"/總寬:"+w);
 
  $(obj).css('width', screen_L + 'px');//屏框寬
  $(obj).find('.picbox').css('width', w * 3 + 'px');//容器寬度
  $(obj).find('.picbox').css({left: -1 *w +"px"});//位置
 
$(obj).find('.mainlist').css('width', w * 3 + 'px');//

  var imgList=$(obj).find('.mainlist').html();//li圖片對象
   
  $(obj).find('.mainlist').append(imgList +imgList);//複製內容
 
  var lunbo_box=$(obj).find('.picbox').html();
   
  if(linum<max_num){
  $(obj).find('.og_prev,.og_next').remove(); //圖片太少 刪除點擊按鈕
  }

 $(obj).find(".og_next").bind("click",function(){
 
 if($(obj).find('.swaplist,.mainlist').is(':animated')){
 $(obj).find('.swaplist,.mainlist').stop(true,true);
  }
 
 if(linum>=max_num){//多於?張圖片

 var ml = parseInt($(obj).find('.mainlist').css('left'));//默認圖片ul位置
  console.log("初始狀態"+ml);
 
   if(stage==1){
 if(screen_L-w>=ml){
 console.log("隱藏");
 $(obj).find('.og_next').hide();
 
 $(obj).find('.og_prev').show();  
 return false;
 }else{
 console.log("移動");
 $(obj).find('.mainlist').animate({left: "-="+img_le*num+"px",width:"+="+img_le*num+"px"},'slow',function(){});//默認圖片滾動
// return false;
 }
 
 }else{
 if(ml % w ==0){//整數倍
 $(obj).find('.picbox').html(lunbo_box);
 console.log("當前位置:"+ml);
 }
 var li_move=$(obj).find('.mainlist li:lt('+num+')');
 $(obj).find('.mainlist').animate({left: "-="+img_le*num+"px",width:"+="+img_le*num+"px"},'slow',function(){
 
 });//默認圖片滾動
 //$(obj).find('.mainlist').append(li_move.clone());//複製內容
 $(obj).find('.mainlist').append(imgList);//複製內容  消耗資源
 }
 
 }
 });
   
$(obj).find(".og_prev").bind("click",function(){
  if($(obj).find('.swaplist,.mainlist').is(':animated')){
  $(obj).find('.swaplist,.mainlist').stop(true,true);
  }
 
  if($(obj).find('.mainlist li').length>=max_num){//多於1張圖片
 
  var ml = parseInt($(obj).find('.mainlist').css('left'));//默認圖片ul位置
  console.log("初始狀態"+ml);
  if(stage==1){
 if(ml>=0){
 $(obj).find('.og_prev').hide();  
 $(obj).find('.og_next').show(); 
 return false;
 }else{
 $(obj).find('.mainlist').animate({left: "+="+img_le*num+"px"},'slow',function(){});//默認圖片滾動
 return false;
 }
 
 }else{
  $(obj).find('.mainlist').animate({left:"+="+img_le*num+"px"},'slow',function(){
  if(ml>=screen_L ){
  $(obj).find('.picbox').html(lunbo_box);
  console.log("當前位置:"+ml);
  }
  });//默認圖片滾動
 }
  }
  });  
}