html5+css3+js 用定时器实现时间轴的自动播放

本篇介绍了用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;
    }

四、最终展示结果：