摘要：需要實現(xiàn)的效果如下圖總是顯示最新一個年份的列表，每次顯示個年份列的列表手機(jī)個手機(jī)顯示如下列表上鼠標(biāo)也可以切換，兩個箭頭同樣可以切換。

需要實現(xiàn)的效果如下圖：

總是顯示最新一個年份的列表，每次顯示10個年份列的列表（手機(jī)4個）

手機(jī)顯示如下：

列表上鼠標(biāo)也可以切換，兩個箭頭同樣可以切換。

Js：

  
/----------------------------------------    企業(yè)大事件 --------------------------------------------------/


 function big_event() {
        
    var IsMove = false;                                               //是否移動的標(biāo)志位
  var num = 10;                                                     // 默認(rèn)顯示年份的數(shù)量           
  var $title = $(".eh-year-move ul li");                            //Title選取
  var t_length = $title.length;                                     //目前已有年份的數(shù)量
  var t_width = $title.width() + 1;                                 //單個title的寬度
  
  var $content = $(".eh-content div.eh-content-item");              //年份對應(yīng)的事件
  var $move_ul = $(".eh-year-move ul");                             //整個可移動的Title
  var $y_line = $(".on-year-line");                                 //年份刻度
  
  //console.log(n_index);
  var winWidth = $(window).width();                                 //瀏覽器的寬度
  if( winWidth <= 550 ){
      num = 4;
  }
  else{
      num = 10;
  }
  var i = t_length - num;                                           //被隱藏年份的個數(shù)
  //第一個title的li距離最左側(cè)的距離
  var d = ( $(".eh-year-wrap").width() - num * t_width ) / 2.0 ;   
  
  if( t_length >= num ){
      
      //默認(rèn)顯示最新的年份列表
      $title.eq( t_length -1 ).addClass("on-year").siblings().removeClass("on-year");
      $content.eq( t_length -1 ).addClass("eh-content-item-on").siblings().removeClass("eh-content-item-on");
      $move_ul.animate({
          "left": - t_width * ( t_length - num ) ,
      }); 
      $y_line.animate({
          "width": d + t_width * ( num - 0.5 ) ,
      },0);
  }
  
  var n_index = $("li.on-year").index();                           //當(dāng)前顯示年份的索引值
  
  //console.log(n_index);
  
  //鼠標(biāo)劃過切換內(nèi)容
  $title.hover(function() {
        
      var index = $(this).index();
      n_index = index;
      tabMove(n_index);  //引用主函數(shù)
      
    });
  
  //左箭頭切換
  $(".eh-arrowL").click(function() {
        
      if( n_index > 0){
          
          n_index -= 1;
          if( ( ( n_index > ( num - 1 ) ) && IsMove ) || n_index < i ){
              i -= 1;
          }
          tabMove(n_index); //引用主函數(shù)
      }
      
      
    });
  
  //右箭頭切換
  $(".eh-arrowR").click(function() {
        
      if( n_index < t_length - 1){
          
          n_index += 1;
          if( ( n_index > ( num - 1 + i ) ) && IsMove ){
              i += 1;
          }
          tabMove(n_index);  //引用主函數(shù)
      }
    });
  
  //主函數(shù) 
  function tabMove(index){

      $title.eq(index).addClass("on-year").siblings().removeClass("on-year");
      $content.eq(index).addClass("eh-content-item-on").siblings().removeClass("eh-content-item-on");
      
      //console.log(index);
      //console.log(i);
      
      if( index >= ( num - 1 + i ) ){
          
          if( IsMove ){
              
              $move_ul.animate({
              
                  "left": - t_width * ( index - num + 1  ) ,
              }); 
          }
          
          
          $y_line.animate({
              "width":  d + t_width * ( num - 0.5 ),
          },0);   
          
          
          if( i >= t_length - num ){
              IsMove = false;
              //console.log(IsMove);
          }
          
      }
      else{

          if(i >= 0 ){
              
              if( index <= i ){
                  
                  IsMove = true;
                  $move_ul.animate({
                      "left": - t_width * ( index ) ,
                  }); 
                  
                  $y_line.animate({
                      "width":  d +  t_width * 0.5,
                  },0);
              }
              else{
                  
                  index = index - i;
                  $y_line.animate({
                      "width": d + t_width * ( index + 0.5 ),
                  },0);
              }
          }
          else{
              
              $y_line.animate({
                  "width":  d + t_width * ( index + 0.5 ),
              },0);
          }   
      }   
  }
  
};

$(document).ready(function(e) {
  big_event();                //企業(yè)大事件
}).resize(function(){
  big_event();                //企業(yè)大事件
});

HTML：

< div class="contain-contain"> < div class="eh-title">

< div class="eh-year-wrap">
      

            

                
2005
                
2006
                
2007
                
2008
                
2009
                
2010
                
2011
                
2012
                
2013
                
2014
                
2015
                
2016