js切換圖片實現動圖效果


jsp頁面:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>MyWeb</title>
    <script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
  </head>
  <body>
  Hello World!
  <img id="showimages" src="http://image.data.cma.cn/vis/RAD__B0_CR/20180531/RADA_CHN_DOR_L3_MST_NOC-R-20180531000600.PNG"
       style="display: block; cursor: pointer;" width="900">
  </body>
</html>

js代碼:

//實時刷新時間單位為毫秒
setInterval('refreshQuery()',2000);
/* 刷新查詢 */
var pngArray = new Array();
pngArray[0] = "http://image.data.cma.cn/vis/RAD__B0_CR/20180531/RADA_CHN_DOR_L3_MST_NOC-R-20180531000000.PNG";
pngArray[1] = "http://image.data.cma.cn/vis/RAD__B0_CR/20180531/RADA_CHN_DOR_L3_MST_NOC-R-20180531000600.PNG";
pngArray[2] = "http://image.data.cma.cn/vis/RAD__B0_CR/20180531/RADA_CHN_DOR_L3_MST_NOC-R-20180531001200.PNG";
pngArray[3] = "http://image.data.cma.cn/vis/RAD__B0_CR/20180531/RADA_CHN_DOR_L3_MST_NOC-R-20180531001800.PNG";
pngArray[4] = "http://image.data.cma.cn/vis/RAD__B0_CR/20180531/RADA_CHN_DOR_L3_MST_NOC-R-20180531002400.PNG";
pngArray[5] = "http://image.data.cma.cn/vis/RAD__B0_CR/20180531/RADA_CHN_DOR_L3_MST_NOC-R-20180531003000.PNG";
var index = 0;
function refreshQuery(){
    if (index > 5) index = 0;
    $("#showimages").attr('src',pngArray[index++]);
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM