前端速成：双月Java之旅（week3）_day4

最新推荐文章于 2024-09-16 06:30:00 发布

若凡໌້ᮨ

最新推荐文章于 2024-09-16 06:30:00 发布

阅读量146

点赞数

文章标签：前端 java html

本文链接：https://blog.csdn.net/weixin_53673193/article/details/125948898

版权

JavaScript 轮播图自动切换图片切换定时器

关键词由CSDN通过智能技术生成

今天学习的是使用JS来实现网页中的轮播图自动切换播放。

要实现这个需求，我们首先需要有一组图片，然后每隔三秒钟就去切换一张，一直循环不停切换。对其进行技术分析，首先要求我们能实现图片的切换，然后就是定时每隔三秒钟对页面进行一次操作。

先学习如何进行图片切换。这里使用的是最基础的图片切换方式，即点击按钮来切换图片。

首先使用HTML搭建整体框架，即一个button按钮<input type="button">和一个图片<img src=" ">,简要设置图片宽高使界面便于浏览，同时在<img>中需要给图片赋id值，便于JS获取图片。HTML搭建完成之后，使用<script>来构建切换图片的函数，首先是定义变量img1来获取图片，然后修改变量图片的路径就可以实现点击按钮切换图片的效果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function changeImg(){
				var img1 = document.getElementById("img1");
				img1.src = "../img/桌面.jpeg";
			}
		</script>
	</head>
	<body>
		<input  type="button" value="点击切换图片" onclick="changeImg()"/>
		<img src="../img/壁纸.jpeg" id="img1" height="200px" width="400px">
	</body>
</html>

而要实现定时操作，只需要调用window.setInterval()方法，比如window.setInterval("alert('123')",2000)的作用是在页面中弹出弹窗显示123，每2000毫秒弹一次。

现在开始编写自动轮播图的代码，以两张图片为例。

首先是搭建框架，这里只用显示一张图片就可以，需要注意的是，要在<body>标签内添加onload，这样才可以在页面加载完成后触发操作。

然后在<script>中定义了两个函数，一个是进行图片切换的操作function changeImg()，另一个是固定间隔操作function init()，在init()中嵌套changeImg()函数，即init("changeImg()",1000)，可以实现每固定间隔1000毫秒运行一次切换图片的函数changeImg()，需要注意的是切换图片不能固定，因为需要循环播放，这里采用的是定义变量index，比如图片为三张时，需要index%3+1，这样子运行的结果就是到4就重1开始重新循环，且只有1、2、3三个数字，这里需要保证图片的命名为123，这就成功的实现了图片的自动轮播。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			var index = 0;
			
			function changeImg(){
				var img = document.getElementById("img1");
				var curIndex = index%2+1;
				img.src = "../img/"+curIndex+".jpeg"
				index = index + 1
			}
			function init(){
				setInterval("changeImg()",1000);
			}
		</script>
	</head>
	<body onload="init()">
		<img src="../img/1.jpeg" id="img1" width="100%"> 	
	</body>
</html>