jQuery水平时间轴实现个人历程代码

jQuery水平时间轴实现个人历程代码

一款jQuery简单的水平时间轴带左右按钮控制时间轴项目滑动效果,实现个人历程展示代码。

使用方法
引入每次切换的JS文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
     
  $(function() {
         
      var timeLength = $('.time-box li').length,
          timeliWidth = $('.time-box li').outerWidth();
         
      var index = 0;
         
      $('.time-box ul').width(timeLength * timeliWidth);
         
      function slideOne(i) {
          var scrollVal = i * timeliWidth; //每次切换的数量
          $('.time-box').stop().animate({
              scrollLeft: scrollVal
          }, 300);
      }
         
      $('.right-btn').click(function() {
          index = index >= (timeLength-4) ? 0 : index + 1;
          slideOne(index);
      })
         
      $('.left-btn').click(function() {
          index = index <= 0 ? (timeLength-4) : index - 1;
          slideOne(index);
      })
         
  })
     
</script>

文件信息:

    0

    发表评论