js切换图片实现动图效果

最新推荐文章于 2023-03-09 15:14:38 发布

weixin_30593443

最新推荐文章于 2023-03-09 15:14:38 发布

阅读量255

点赞数

文章标签： javascript java ViewUI

原文链接：http://www.cnblogs.com/ff-lovelife/p/9122343.html

版权

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

转载于:https://www.cnblogs.com/ff-lovelife/p/9122343.html

weixin_30593443

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js切换图片实现动图效果

jsp页面：<%@ page contentType="text/html;charset=UTF-8" language="java" %><html> <head> <title>MyWeb</title> <script type="text/javascript" src="js/jqu...
复制链接

扫一扫