本篇介紹了用css3實現時間軸樣式，用jq實現時間軸的自動輪播和啟動暫停事件，具體程式碼如下：
一、time.html

 <div class="heatMapTimer">
        <ul class="time-line">
            <li class="time-btn time-play"></li>
            <li class="time-item" data-index="0"></li>
            <li class="time-item" data-index="1"></li>
            <li class="time-item" data-index="2"></li>
            <li class="time-item" data-index="3"></li>
            <li class="time-item" data-index="4"></li>
            <li class="time-item" data-index="5"></li>
            <li class="time-item" data-index="6"></li>
            <li class="time-item" data-index="7"></li>
            <li class="time-item" data-index="8"></li>
            <li class="time-item" data-index="9"></li>
            <li class="time-item" data-index="10"></li>
            <li class="time-item active" data-index="11"></li>
        </ul>
    </div>
 

二、css樣式部分

  *{
            padding: 0;
            margin: 0;
            list-style: none;
            text-decoration: none;
        }
        body{
            background: #efefef;
        }
        /*時間軸樣式*/
        .heatMapTimer {
            position: absolute;
            width: 100%;
            z-index: 1;
            text-align: center;
            top: 40px;
        }
        .time-item{
            width: 25px;
            height: 25px;
            border-radius: 50%;
            margin: 0 10px;
        }
        .time-item, .time-btn {
            display: inline-block;
            background: #fff;
            cursor: pointer;
        }
        .time-btn {
            border-radius: 3px;
            width: 30px;
            height: 30px;
            font-size: 23px;
            background: #fff;
            margin-right: 10px;
        }
         /*播放樣式*/
        .time-play:before{
            display: block;
            content: '';
            border-top: 12px solid transparent;
            border-left: 12px solid #595959;
            border-bottom: 12px solid transparent;
            width: 0;
            height: 0;
            text-align: center;
            margin: 3px auto 0;
        }
         /*暫停的樣式*/
        .time-pause:before,.time-pause:after{
            content: ' ';
            border-radius: 3px;
            border-top:6px solid #595959;
            border-bottom:6px solid #595959;
            border-left: 3px solid #595959;
            border-right:3px solid #595959;
            margin: 3px;
            overflow: hidden;
            display: inline-block;
            height: 12px;
        }
       /*時間點選中樣式*/
        .time-item.active{
            background-color: #34b93d;
        }
 

三、JS部分

<script type="text/javascript">
    timeClick();//時間軸點選事件
    addTimeTitle();//為時間軸的li標籤動態新增title屬性(本篇預設加的是最近十二個小時的時間階段，可根據自己的需要選擇是否引用
)
    function timeClick() {
        var timer,
            index,//定義li選中狀態時的索引
            $timeUl=$(".time-line"),
            $timeLi=$(".time-line li"),
            lenCount=$timeLi.length-1;//去除第一個按鈕li標籤的長度
        //點選播放時間軸事件
        $timeUl.on("click",".time-play",function () {
            $(this).removeClass("time-play").addClass("time-pause");
            index=Number($timeUl.find("li.active").attr("data-index"));//將字串強制轉換為數字型別
            timer=setInterval(function () {
                //判斷當前索引的位置，如果在最後一位則從第一個時間點開始，反之則按順序播放
                if(lenCount==index+1){
                    $timeUl.find("li:eq('"+lenCount+"')").removeClass("active");
                    $timeUl.find("li:eq(1)").addClass("active");
                }else{
                    $(".time-line li.active").next().addClass("active").siblings().removeClass("active");
                }
                $timeLi.each(function () {
                    if($(this).hasClass("active")){
                        index=Number($(this).attr("data-index"));//字串轉換為數字型別，索引從0開始
                    }
                });
            },2000)
        });
        //點選暫停按鈕事件
        $(".time-line").on("click",".time-pause",function () {
            $(this).removeClass("time-pause").addClass("time-play");
            clearInterval(timer);//清除定時器
        });
        //點選某個時間點時觸發事件
        $timeLi.not(":first-child").click(function () {
            var index=$(this).data("index");
            $(this).addClass("active").siblings().removeClass("active");
            clearInterval(timer);//清除定時器
        })
    }
    function addTimeTitle() {
        var date=[];
        for(var i=12;i>=1;i--){
            date.push({index:i,time:getFormatDate(i)});
        }
        //陣列排序
        date= date.sort(function(a,b) {
            return a.index> b.index?-1:1;
        });
        $.each(date,function (index,item) {
            $(".time-line li:eq('"+(index+1)+"')").attr("title",item.time);
        })
    }
    //獲取系統時間的最近十二個小時
    function getFormatDate(hourCount){
        var now=new Date();
        var date=new Date(new Date(now.getTime() - hourCount * 3600 * 1000));
        var year=date.getFullYear();
        var month=date.getMonth()+1;
        month=(month<=9)?"0"+month:month;
        var day=date.getDate();
        day=(day<=9)?"0"+day:day;
        var hour=date.getHours();
        hour=(hour<=9)?"0"+hour:hour;
        var minute=date.getMinutes();
        minute=(minute<=9)?"0"+minute:minute;
        var dateTime=year+"-"+month+"-"+day +" "+hour+":00:00";
        return dateTime;
    }
 

四、最終展示結果：