javascript实现图像自动切换

最新推荐文章于 2019-10-22 20:36:13 发布

liminlimin_limin

最新推荐文章于 2019-10-22 20:36:13 发布

阅读量883

点赞数

分类专栏： java web开发文章标签： javascript 图像自动切换

本文链接：https://blog.csdn.net/liminlimin_limin/article/details/41492949

版权

java web开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

具体过程：

1、创建web project

2、在WebRoot目录下添加文件夹images，保存几张图片

3、并在WebRoot目录下添加html文件，内容如下：

<!DOCTYPE html>
<html>
  <head>
    <title>MyHtml.html</title>

	<script type="text/javascript">
		setInterval("loadImage()", 3000);
		var images = ['01.jpg', '02.jpg', '03.jpg', '04.jpg', '05.jpg'];
		
		var i = 0;
		function loadImage()
		{
			++i;
			if(i == 5)
				i = 0;
			var oimg = document.getElementById('image');
			var olab = document.getElementById('info');
			oimg.src = "./images/" + images[i];
			olab.innerText = images[i];
		}
	</script>
	
  </head>
  
  <body>
  	Current picture name: <label id="info"></label>
  	<p/>
  	<img src="./images/01.jpg" id="image" width="200" height="300" />
  	
  	<!-- 设置label的初始值为01.jpg --> 
  	<script type="text/javascript">
  		var olab = document.getElementById('info');
  		olab.innerText = images[i];
  	</script>

  </body>
</html>

运行即可实现。

liminlimin_limin

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
javascript实现图像自动切换

具体过程：1、创建web project2、在WebRoot目录下添加文件夹images，保存几张图片3、并在WebRoot目录下添加html文件，内容如下： MyHtml.html setInterval("loadImage()", 3000); var images = ['01.jpg', '02.jpg', '03.jpg', '04.jpg
复制链接

扫一扫

专栏目录