横向时间轴的实现

html页面代码：

<div class="time_axis">
    <div class="time_box">
        <div class="time_box_list">
            <ul class="time_horizontal"></ul>
        </div>
    </div>
    <ul class="flex_direction_nav"></ul>
</div>

css代码：

/*横向时间轴*/
.time_axis{
    margin: 20px 20px 20px 20px;
    width: 93%;
    height: 150px;
}
.time_axis .time_box{
    position: relative;
    visibility: visible;
    animation-delay: 0.4s;
    animation-name: zoomIn;
}
.time_axis .time_box .time_box_list{
    overflow: hidden;
}
.time_axis .time_box .time_box_list::before{
    position: absolute;
    top: 20px;
    right: 0;
    left: 0;
    border-top: 1px solid #C7C7C7;
    content: '';
}
.time_horizontal{
    width: 1000%;
    transition-duration: 0s;
    transform: translate3d(0px, 0px, 0px);
}
.time_horizontal li {
    float: left;
    position: relative;
    text-align: center;
    width: 200px;
    padding-top: 40px;
}
.time_horizontal li b::before {
    content: attr(data-title);
    color: #fff;
    font-weight: 400;
    padding-top: 8px;
    position: absolute;
    top: 0;
    left: 40.4%;
    width: 40px;
    height: 40px;
    border: 2px solid #7ec836;
    border-radius: 50%;
    background: #7ec836;
}
.flex_direction_nav{
    padding: 0;
    margin: 0;
    list-style: none;
    top: 100px;
    position: absolute;
}
.flex_direction_nav a{
    position: absolute;
    top: 50%;
    width: 48px;
    height: 160px;
    line-height: 160px;
    overflow: hidden;
    margin-top: -80px;
    font-size: 50px;
    font-family: simsun;
    color: #666;
    text-align: center;
}
.flex_direction_nav a:hover, .flex_direction_nav a:focus{
    text-decoration: none;
}
.flex_direction_nav .flex_next{
    right: -700px;
}
.flex_direction_nav .flex_prev{
    left: -20px;
}

js代码：

// 获取时间轴上需要显示的数据
function getEarlyWarningInfo(){
    let _this = this;
    $.ajax({
        url: commonJs.HCFlood + "/waterpointReason/list?isActive=2",
        type: "POST",
        contentType: "application/json",
        dataType: "JSON",
        success: function(res){
            if(res.status == 200){
                if(res.data.list.length != 0){
                    let data = res.data.list[0];
                    let startTime = commonJs.timeStamp2String(data.startTime);
                    // 添加开启节点
                    $(".time_horizontal").append(`
                        <li class="time_horizontal_part">
                            <b data-title="启动"></b>
                            开启<br/>
                            ${data.name}<br/>
                            ${startTime}
                        </li>
                    `);
                    _this.timeAxis(data.id); // 时间轴展示
                }
            }
        }
    });
}

// 时间轴展示
function timeAxis(id){
    $.ajax({
        url: commonJs.HCFlood + "/waterpointReasonLog/list?warningId=" + id,
        type: "POST",
        contentType: "application/json",
        dataType: "JSON",
        success: function(res){
            if(res.status == 200){
                let data = res.data.list;
                if(data.length != 0){
                    let html = "";
                    for(let i = 0; i < data.length; i++){
                        let time = commonJs.timeStamp2String(data[i].createTime);
                        html += `
                            <li class="time_horizontal_part" title="${data[i].operation}">
                                <b data-title="变更"></b>
                                ${data[i].waterpointReasonName}<br/>
                                ${time}
                            </li>
                        `;
                    }
                    // 如果获取的数据长度大于2（实际长度已经为3了，因为有个启动节点），显示左右切换按钮
                    if(data.length > 2){
                        $(".flex_direction_nav").append(`
                            <li class="flex_nav_prev"><a class="flex_prev" href="#">&lt;</a></li>
                            <li class="flex_nav_next"><a class="flex_next" href="#">&gt;</a></li>
                        `);
                    }
                    $(".time_horizontal").append(html);
                }
            }
        }
    });
}

超出三个进程，显示左右滑动按钮，可以点击进行翻页滑动的显示：

// 时间轴滑动
$(document).on("click", ".flex_next", function(){
    let liNum = $(".time_horizontal_part").length;
    let boxWidth = $(".time_horizontal_part").width() * liNum;
    let moveWidth;
    let rightWidth = $(".time_horizontal li").css("right").replace("px", "");
    boxWidth = boxWidth - rightWidth;
    if(boxWidth / 600 > 2){
        moveWidth = parseInt(rightWidth) + 600;
        $(".time_horizontal li").css("right", moveWidth);
    }else{
        moveWidth = parseInt(boxWidth - 600) + parseInt(rightWidth);
        $(".time_horizontal li").css("right", moveWidth);
    }
});
$(document).on("click", ".flex_prev", function(){
    let liNum = $(".time_horizontal_part").length;
    let boxWidth = $(".time_horizontal_part").width() * liNum;
    let moveWidth;
    let rightWidth = $(".time_horizontal li").css("right").replace("px", "");
    if(rightWidth / 600 > 1){
        moveWidth = rightWidth - 600;
        $(".time_horizontal li").css("right", moveWidth);
    }else{
        $(".time_horizontal li").css("right", 0);
    }
});

页面展示效果：