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