js用滚动条模拟横向时间轴

1. 原理是通过设置时间轴盒子overflow-x: scroll;横向溢出的时候出现滚动条； (同理，制作纵向时间轴则设置overflow-y: scroll)
2. 在时间轴盒子外层再包裹一个固定大小的div，该盒子高度要比时间轴的盒子高度小20px，设置overflow:hidden，则可以隐藏掉时间轴盒子出现的滚动条;

css代码：
.car-time-bar{
    width: 885px;
    height: 220px;
    margin: 22px 24px;
    padding: 0 16px;
    position: relative;
    overflow: hidden;
}
.car-time-bar-content{
    width: 885px;
    height: 240px;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

/* 时间轴左右两侧分别放置两个按钮 点击左划和点击右划 */
.nv_lf{
    width: 16px;
    height: 22px;
    background: url("../img/time_bar_l.png") no-repeat;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -11px;
}
.nv_rt{
    width: 16px;
    height: 22px;
    background: url("../img/time_bar_r.png") no-repeat;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -11px;
}

样式的部分不多赘述，每一份设计稿设计都不一致，主要是理解方法

时间轴滑动的原理是通过点击按钮控制滚动条滚动，使用setInterval模拟实现平滑滚动；
js代码如下：

    var nvLf = $('左划按钮id'),
        nvRg = $('右划按钮id'),
        timeBar = document.getElementById('时间轴盒子id');
    nvLf.on('click',function () {
        var times = 0;
        var leftScroll = setInterval(function () {
            var leftLen = timeBar.scrollLeft;
            var step = leftLen - 10;
            timeBar.scrollLeft = step;
            times += 1;
            if(times == 18){
                clearInterval(leftScroll);
            }
        },1);
    });
    nvRg.on('click',function () {
        var times = 0;
        var leftScroll = setInterval(function () {
            var leftLen = timeBar.scrollLeft;
            var step = leftLen + 10;
            timeBar.scrollLeft = step;
            times += 1;
            if(times == 18){
                clearInterval(leftScroll);
            }
        },1);
    });