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

猜你喜欢

转载自www.cnblogs.com/ff-lovelife/p/9122343.html