自定义播放条及数据更新

2017年，第一天上班写文章，过年在家没条件，农村的娃不容易啊。。

以上过滤掉吧，先看下本文要实现的效果

这只是播放效果，至于为什么没有把数据更新效果弄出来，主要是不想，，哈哈

熟练JS的玩家们看到这样就会想到setInterval吧，，没错这个就是用setInterval来实现的，，

下面看下HTML结构吧

雷达



    

        

        

            

            

        
    

代码没有贴全，因为其他的不需要。。

接着来看下JS部分

// 雷达
function radarFn() {
    var radarDatas = [
        {"image":"http://cdn.caiyunapp.com/res/storm_radar/radar_CN01_nmc_fast/201612080855.png","time":"08:55","lonlat":[3.9079,71.928151770494,57.9079,134.86564822951]},
        {"image":"http://cdn.caiyunapp.com/res/storm_radar/radar_CN01_nmc_fast/201612080904.png","time":"09:04","lonlat":[3.9079,71.928151770494,57.9079,134.86564822951]},
        {"image":"http://cdn.caiyunapp.com/res/storm_radar/radar_CN01_nmc_fast/201612080919.png","time":"09:19","lonlat":[3.9079,71.928151770494,57.9079,134.86564822951]},
        {"image":"http://cdn.caiyunapp.com/res/storm_radar/radar_CN01_nmc_fast/201612080931.png","time":"09:31","lonlat":[3.9079,71.928151770494,57.9079,134.86564822951]},
        {"image":"http://cdn.caiyunapp.com/res/storm_radar/radar_CN01_nmc_fast/201612080943.png","time":"09:43","lonlat":[3.9079,71.928151770494,57.9079,134.86564822951]},
        {"image":"http://cdn.caiyunapp.com/res/storm_radar/radar_CN01_nmc_fast/201612080954.png","time":"09:54","lonlat":[3.9079,71.928151770494,57.9079,134.86564822951]},
        {"image":"http://cdn.caiyunapp.com/res/storm_radar/radar_CN01_nmc_fast/201612081005.png","time":"10:05","lonlat":[3.9079,71.928151770494,57.9079,134.86564822951]},
        {"image":"http://cdn.caiyunapp.com/res/storm_radar/radar_CN01_nmc_fast/201612081018.png","time":"10:18","lonlat":[3.9079,71.928151770494,57.9079,134.86564822951]},
        {"image":"http://cdn.caiyunapp.com/res/storm_radar/radar_CN01_nmc_fast/201612081031.png","time":"10:31","lonlat":[3.9079,71.928151770494,57.9079,134.86564822951]},
        {"image":"http://cdn.caiyunapp.com/res/storm_radar/radar_CN01_nmc_fast/201612081031.png","time":"10:31","lonlat":[3.9079,71.928151770494,57.9079,134.86564822951]},
        {"image":"http://cdn.caiyunapp.com/res/storm_radar/radar_CN01_nmc_fast/201612081031.png","time":"10:31","lonlat":[3.9079,71.928151770494,57.9079,134.86564822951]}
    ];

    var autoPlay = null,
        imageLayer = null,
        index = 0,
        once = true;
    function play(radarData) {
        // 重置索引
        index = 0;
        // 重置进度
        $(".zh-playbar dd .zh-cur").width(0);
        //  清除间隔动画
        if(autoPlay !== null) {
            clearInterval(autoPlay);
            autoPlay = null;
        }
        // 清除图片
        if(imageLayer !== null) {
            map.remove(imageLayer);
            imageLayer = null;
        }
        // 生成节点
        var rdLength = radarData.length,
            ddWth = $(".zh-playbar dd").width(),
            liWth = (ddWth/rdLength).toFixed(4),
            li = "";
        for(var i=0; i"+radarData[i].time+"";
        }
        $(".zh-playbar dd ul").html(li);

        // 切换图片
        function switchImgFn() {
            if(imageLayer !== null) {
                map.remove(imageLayer);
                imageLayer = null;
            }
            index++;
            if(index > rdLength) {
                index = 0;
            }
            if(radarData[index-1]) {
                imageLayer = new AMap.ImageLayer({
                    map: map,
                    url: radarData[index-1].image,
                    bounds: new AMap.Bounds([radarData[index-1].lonlat[1], radarData[index-1].lonlat[0]], [radarData[index-1].lonlat[3], radarData[index-1].lonlat[2]]),
                });
            }
            $(".zh-playbar dd .zh-cur").width(index*liWth);
        }

        // 播放判断
        if($(".zh-playbar dt").hasClass("active") && $("#op_radar").hasClass("active") && autoPlay === null) autoPlay = setInterval(switchImgFn, 1000); // 播放

        // 播放/暂停
        $(".zh-playbar dt").off("click");
        $(".zh-playbar dt").on("click", function() {
            if($(this).hasClass("active")) {
                $(this).removeClass("active");
                clearInterval(autoPlay); // 暂停
                autoPlay = null;
            } else {
                $(this).addClass("active");
                autoPlay = setInterval(switchImgFn, 1000); // 播放
            }
        });
        // 显示/隐藏
        $("#op_radar").off("click");
        $("#op_radar").on("click", function() {
            if($(this).hasClass("active")) {
                $(this).removeClass("active");
                $(".zh-playbar").removeClass("active"); // 隐藏播放条
                if(imageLayer !== null) imageLayer.hide(); // 隐藏图片
                clearInterval(autoPlay); // 暂停
                autoPlay = null;
            } else {
                $(this).addClass("active");
                $(".zh-playbar").addClass("active"); // 显示播放条
                if(imageLayer !== null) imageLayer.show(); // 显示图片
                if(once) { // 第一次点击会自动播放
                    $(".zh-playbar dt").addClass("active");
                    once = false;
                }
                if($(".zh-playbar dt").hasClass("active")) autoPlay = setInterval(switchImgFn, 1000); // 播放
            }
        });
    }

    // 初始状态
    if($("#op_radar").hasClass("active")) {
        $(".zh-playbar").addClass("active"); // 显示播放条
        $(".zh-playbar dt").addClass("active"); // 播放状态
    }

    // 初始执行(这里可以使用ajax请求来的数据)
    play(radarDatas);

    // 8分钟重新请求数据(这里可以使用ajax请求来的数据)
    setInterval(function() {
        var length = Math.round(Math.random()*radarDatas.length);
            length = length == 0 ? 1 : length;
        var testData = radarDatas.slice(0, length);
        play(testData);
    }, 8*60*1000);
}

细看一下代码不多，不用深究，粗略看下知道怎么回事就行了。。