JQueryオートループローテーション

1599 ワード
循環ローテーションを実現する上で最も重要なのは、第1ローテーションが終わった後、どのように再生を再開するかです.
//  HTML

    
  
  • 
  
  • 
  
  • 



//li      01   

    
  
  • 
  
  • 
  
  • 
  
  •

03>>アニメから01まで、そのまま本物の01まで
例:
$(document).ready(function(){
  //  
    var t = setInterval('lunbo()', 5000);

  //    ，  
    $('div.expert').mouseover(function(){
      clearInterval(t);}).mouseout(function(){    
        t = setInterval('lunbo()', 5000);});
  })
  
var page = 1;
var i = 3;
function lunbo(){    
  var $expert_list = $('div.expert_list');   
  var len_li = $expert_list.find('li').length;    
  var page_count = Math.ceil(len_li/i);    
  if(!$expert_list.is(':animated')) {        
    if (page == page_count-1) {   
        $expert_list.animate({right: '+=405px'}, 'slow')  
                .animate({right:'0px'},1);            
        page = 1;       
   } else {            
        $expert_list.animate({right: '+=405px'}, 'slow'); 
       page++;       
   }    
}

HTML構造

  

    
    
      
  • 
      
  • 
      
  •

cssスタイル
.expert{    
  height: 202px;    
  overflow:hidden;
  padding:20px 0;
 position: relative;
}
.expert_list{
  width: 1620px;
  position: relative;
}
.expert_list ul{
  height: 202px;
}
.expert_list ul li{
  display: inline;
  float: left;
  margin-left: 10px;
}
js jQuery.float
クラス配列を配列に変換するmakeArray()