轮播图

//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);
  }
  });//默认图片滚动
 }
  }
  });  
}