自定义播放条及数据更新

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

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

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

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

下面看下HTML结构吧

<!-- 控制元素 -->
<li class="zh-item" id="op_radar"><div class="zh-name-icon"><span class="zh-icon zh-icon-radar"></span><span class="zh-name">雷达</span></div></li>

<!-- 播放条 -->
<div class="zh-playbar">
    <dl>
        <dt><span class="zh-icon"></span></dt>
        <dd>
            <div class="zh-cur"></div>
            <ul><!-- 这里放拼装的节点 --></ul>
        </dd>
    </dl>
</div>

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

接着来看下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<rdLength; i++) {
            li += '<li style="width: '+liWth+'px;">'+radarData[i].time+'</li>';
        }
        $('.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);
}

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