公司大事记-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">
      <div class="eh-year-move">
            <ul>
                <li>2005</li>
                <li>2006</li>
                <li>2007</li>
                <li>2008</li>
                <li>2009</li>
                <li>2010</li>
                <li>2011</li>
                <li>2012</li>
                <li>2013</li>
                <li>2014</li>
                <li>2015</li>
                <li>2016</li>
            </ul>
       </div>

       <i class="on-year-line">
           <i class="eh-line-bg"></i>
       </i>
    </div>



    <span class="eh-arrow eh-arrowL"></span>
    <span class="eh-arrow eh-arrowR"></span>
</div>

<div class="eh-content">

    <!-- 2005 -->
    <div class="eh-content-item">
        <ul>
            <li><a href="#" title="">2005 VIPABC获2013年新浪教育「最具综合实力教育集团」</a></li>
        </ul>
    </div>
    <!-- 2006 -->
    <div class="eh-content-item">
        <ul>
            <li><a href="#" title="">2006 VIPABC获2013年新浪教育「最具综合实力教育集团」</a></li>
        </ul>
    </div>
    <!-- 2007 -->
    <div class="eh-content-item">
        <ul>
            <li><a href="#" title="">2007 VIPABC获2013年新浪教育「最具综合实力教育集团」</a></li>
        </ul>
    </div>
    <!-- 2008 -->
    <div class="eh-content-item">
        <ul>
            <li><a href="#" title="">2008 VIPABC获2013年新浪教育「最具综合实力教育集团」</a></li>
        </ul>
    </div>
    <!-- 2009 -->
    <div class="eh-content-item">
        <ul>
            <li><a href="#" title="">2009 VIPABC获2013年新浪教育「最具综合实力教育集团」</a></li>
        </ul>
    </div>
    <!-- 2010 -->
    <div class="eh-content-item">
        <ul>
            <li><a href="#" title="">2010 VIPABC获2013年新浪教育「最具综合实力教育集团」</a></li>
        </ul>
    </div>
    <!-- 2011 -->
    <div class="eh-content-item">
        <ul>
            <li><a href="#" title="">2011 VIPABC获2013年新浪教育「最具综合实力教育集团」</a></li>
        </ul>
    </div>
    <!-- 2012 -->
    <div class="eh-content-item">
        <ul>
            <li><a href="#" title="">2012 VIPABC获2013年新浪教育「最具综合实力教育集团」</a></li>
        </ul>
    </div>
    <!-- 2013 -->
    <div class="eh-content-item">
        <ul>
            <li><a href="#" title="">2013 VIPABC获2013年新浪教育「最具综合实力教育集团」</a></li>
        </ul>
    </div>
    <!-- 2014 -->
    <div class="eh-content-item eh-content-item-on">
        <ul>
            <li><a href="#" title="">VIPABC获2013年新浪教育「最具综合实力教育集团」</a></li>
            <li><a href="#" title="">腾讯网十年最具影响力外语品牌</a></li>
            <li><a href="#" title="">腾讯网十年最具影响力教育集团</a></li>
            <li><a href="#" title="">VIPABC荣获2013中国年度创新成长企业百强</a></li>
            <li><a href="#" title="">贺VIPABC荣获2013未来之星100强</a></li>
        </ul>
    </div>
    <!-- 2015 -->
    <div class="eh-content-item">
        <ul>
            <li><a href="#" title="">2015 VIPABC获2013年新浪教育「最具综合实力教育集团」</a></li>
        </ul>
    </div>
    <!-- 2016 -->
    <div class="eh-content-item">
        <ul>
            <li><a href="#" title="">2016 VIPABC获2013年新浪教育「最具综合实力教育集团」</a></li>
        </ul>
    </div>

    <div class="clear"></div>
</div> </div>

CSS：

.event-history li{margin-bottom:0;}
.event-history .eh-title{
position:relative;
float:left;
width:100%;
height:74px;
}
.eh-year-wrap{
width:90%;
margin:0 5% 0 5%;
margin-top:30px;
height:41px;
border-top:solid 2px #b4b4b4;
}
.eh-year-move{
position:relative;
width:600px;
height:30px;
margin:7px auto 1px auto;
overflow:hidden;
}
.eh-year-wrap ul{
position:absolute;
width:20000px;
height:30px;
left:0;
top:0;
}
.eh-year-wrap ul li{
float:left;
width:59px;
margin-right:1px;
line-height:30px;
text-align:center;
cursor:pointer;
}

.eh-year-wrap ul li:hover,.eh-year-wrap ul li.on-year{color:#fff;background-color:#f75c5c;}
.eh-arrow{
position:absolute;
display:block;
width:62px;
height:62px;
top:0;
background:url(../images/modules/aboutus/us_arrow.png) no-repeat;
cursor:pointer;
}
.eh-arrowL{left:0;background-position:0 0;}
.eh-arrowL:hover{background-position:0 -62px;}
.eh-arrowR{right:0;background-position:-62px 0;}
.eh-arrowR:hover{background-position:-62px -62px;}

.on-year-line{
display:block;
position:absolute;
width:600px;
height:15px;
left:5%;
top:26px;
border-right:solid 1px #f75c5c;
}
.eh-line-bg{
display:block;
width:100%;
height:2px;
margin-top:4px;
background-color:#f75c5c;

}
.eh-content{
float:left;
width:90%;
margin:30px 5% 0 5%;
border-top:solid 1px #ebebeb;
}
.eh-content-item{
display:none;
float:left;
width:100%;
height:auto;
}
.eh-content-item-on{display:block;}
.eh-content-item ul li{
float:left;
width:100%;
height:50px;
line-height:50px;
text-indent:18px;
border-bottom:solid 1px #ebebeb;
word-break:keep-all;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.eh-content-item ul li a:hover{text-decoration:underline;color:#f75c5c;}

公司大事记-jQuery跟踪切换

mli

引用和评论

Mac上如何测试IE浏览器兼容性－虚拟机解决方案

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具