公司大事记-jQuery跟踪切换

摘要：需要实现的效果如下图总是显示最新一个年份的列表，每次显示个年份列的列表手机个手机显示如下列表上鼠标也可以切换，两个箭头同样可以切换。

需要实现的效果如下图：

总是显示最新一个年份的列表，每次显示10个年份列的列表（手机4个）

手机显示如下：

列表上鼠标也可以切换，两个箭头同样可以切换。

Js：

  
/----------------------------------------    企业大事件 --------------------------------------------------/


 function big_event() {
        
    var IsMove = false;                                               //是否移动的标志位
  var num = 10;                                                     // 默认显示年份的数量           
  var $title = $(".eh-year-move ul li");                            //Title选取
  var t_length = $title.length;                                     //目前已有年份的数量
  var t_width = $title.width() + 1;                                 //单个title的宽度
  
  var $content = $(".eh-content div.eh-content-item");              //年份对应的事件
  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;                                           //被隐藏年份的个数
  //第一个title的li距离最左侧的距离
  var d = ( $(".eh-year-wrap").width() - num * t_width ) / 2.0 ;   
  
  if( t_length >= num ){
      
      //默认显示最新的年份列表
      $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();                           //当前显示年份的索引值
  
  //console.log(n_index);
  
  //鼠标划过切换内容
  $title.hover(function() {
        
      var index = $(this).index();
      n_index = index;
      tabMove(n_index);  //引用主函数
      
    });
  
  //左箭头切换
  $(".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); //引用主函数
      }
      
      
    });
  
  //右箭头切换
  $(".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);  //引用主函数
      }
    });
  
  //主函数 
  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();                //企业大事件
}).resize(function(){
  big_event();                //企业大事件
});

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