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++]); }