衛星雲図の実現効果

効果
衛星雲図取得アドレスhttp://www.weather.com.cn/static/product_video.v 1.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");
    }    
}