卫星云图的实现效果

效果

卫星云图获取地址http://www.weather.com.cn/static/product_video_v1.php

html部分代码 

    
    


   

动画延时





            

            
        

 yunTuFun.js

/************************************************************************/
/* 卫星云图
/************************************************************************/

var timeStrArray = new Array();     //记录云图地址数组
var timeShowStrArr = new Array();   //记录云图地址数组
var ytInfoTimer = null;             //云图播放动画时间控制器
var timeControl = 0;                //控制卫星云图播放

/*
*	页面初始化
*/
$(function () {
    initSpinner();
    initSelectImgList();
});

/*
*	初始化数字调整框
*/
function initSpinner() {
    $("#spinner2").spinner({
        min: 1,
        step: 1
    });
}

/*
*	初始化图片列表
*/
function initSelectImgList() {
    GetImgAddress(); //得到图片地址
    //动态创建左侧列表
    var html = "
";
    for (var i = 0; i < timeStrArray.length; i++) {
        var tempHtml = "
" + timeStrArray[i] + "
";
        html += tempHtml;
    }
    html += "
";
    $("#selectImgList").append(html);
    //列表项的样式设置
    $(".selectImg ul li").hover(function () {
        $(this).addClass("b");
        $(this).css("cursor", "pointer")
    }, function () {
        $(this).removeClass("b");
    })
    //单击列表项显示对应云图图片
    $(".selectImg ul li").click(function () {
        $(this).addClass("a").siblings("li").removeClass("a");
        var imgUrl = "Libs/images/yuntu/" + $(this).text() + ".jpg";
        $('#yuntuImg img').attr('src', imgUrl);
        timeControl = $(this).index();
    })
}

/*
*	得到图片的地址
*/
function GetImgAddress() {
    var TimeTemp = 1000;
    var dataTimeTemp = "20161220";
    var timeStr = "";
    var StimeStr = "";
    for (var i = 15; i < 24; i++) {              //一天24个小时
        for (var j = 0; j < 2; j = j + 1) {  
            
                if (j == 0) {
                    timeStr = dataTimeTemp + i + "1500";
                } 
				else {
                    timeStr = dataTimeTemp + i + "4500";
                }
            
            timeStrArray.push(timeStr);
            var strAddress = "Libs/images/yuntu/" + timeStr + ".jpg";
            timeShowStrArr.push(strAddress);
        }
    }
}

/*
*	开始播放云图动画
*/
function startShowCloud() {
    var time = $("#spinner2").spinner("value");
    if (ytInfoTimer != null) {
        clearTimer();
    }
    //设置计时器动态播放
    ytInfoTimer = setInterval(function () {
        if (timeControl * 20 > 470) {
            $("#selectImgList").scrollTop(timeControl * 20 - 400);
        }
        if (timeControl != 0) {
            $(".selectImg ul li:eq(" + (timeControl - 1) + ")").removeClass("a");
        }
        $(".selectImg ul li:eq(" + timeControl + ")").addClass("a");
        if (timeControl < timeShowStrArr.length) {
            var imgUrl = timeShowStrArr[timeControl++];
            var url = "url(" + imgUrl + ")";
            $('#yuntuImg img').attr('src', imgUrl);//切换云图图片
        } else {
            timeControl = 0;
            clearTimer();
        }
    }, time * 1000);
}

/*
*	清除卫星云图时间控制器
*/
function clearTimer() {
    if (ytInfoTimer != null) {
        clearInterval(ytInfoTimer);
        ytInfoTimer = null;
    }
}

/*
*	停止卫星云图播放
*/
function stopShowCloud() {
    clearTimer();
    if (timeControl > 0) {
        $(".selectImg ul li:eq(" + (timeControl - 1) + ")").addClass("a");
    }    
}