2017年，第一天上班寫文章，過年在家沒條件，農(nóng)村的娃不容易啊。。

以上過濾掉吧，先看下本文要實現(xiàn)的效果

這只是播放效果，至于為什么沒有把數(shù)據(jù)更新效果弄出來，主要是不想，，哈哈

熟練JS的玩家們看到這樣就會想到setInterval吧，，沒錯這個就是用setInterval來實現(xiàn)的，，

下面看下HTML結(jié)構(gòu)吧

雷達(dá)



    

        

        

            

            

        
    

代碼沒有貼全，因為其他的不需要。。

接著來看下JS部分

// 雷達(dá)
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;
        }
        // 生成節(jié)點
        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); // 播放
            }
        });
    }

    // 初始狀態(tài)
    if($("#op_radar").hasClass("active")) {
        $(".zh-playbar").addClass("active"); // 顯示播放條
        $(".zh-playbar dt").addClass("active"); // 播放狀態(tài)
    }

    // 初始執(zhí)行(這里可以使用ajax請求來的數(shù)據(jù))
    play(radarDatas);

    // 8分鐘重新請求數(shù)據(jù)(這里可以使用ajax請求來的數(shù)據(jù))
    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);
}

細(xì)看一下代碼不多，不用深究，粗略看下知道怎么回事就行了。。