JavaScript（二）——轮播图

最新推荐文章于 2024-03-30 05:25:27 发布

子木_Lee

最新推荐文章于 2024-03-30 05:25:27 发布

阅读量234

点赞数 1

分类专栏： JavaScript 文章标签：轮播图 JavaScript

本文链接：https://blog.csdn.net/qq_41819988/article/details/90812329

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

轮播图自动播放

需求:

有一组图片, 每隔3秒钟,就去切换一张,最终是一直在不停切换

技术分析:

每隔三秒钟切换图片

步骤分析:

1. 确定事件: 文档加载完成的事件 onload
           2. 事件要触发 : init()
           3. 函数里面要做一些事情:(通常会去操作元素,提供交互)
              1. 开启定时器: 执行切换图片的函数 changeImg()
           4. changeImg()
              1. 获得要切换图片的那个元素

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片轮播</title>
		<!--
			1. 确定事件: 文档加载完成的事件 onload
			2. 事件要触发 : init()
			3. 函数里面要做一些事情:(通常会去操作元素,提供交互)
			 	1. 开启定时器: 执行切换图片的函数 changeImg()
			4.  changeImg()
			 	1. 获得要切换图片的那个元素
		-->
		<script>
			var index = 0;
			function changeImg(){
				var img = document.getElementById("img1");
				
				var cuIndex = index%3+1;
				img.src="../img/img/"+cuIndex+".jpg"
				
				index+=1;
			}
			
			function init(){
				setInterval("changeImg()",3000);
			}
		</script>
	</head>
	<body onload="init()">
		<img src="../img/img/1.jpg"  width="100%" id="img1"/>
	</body>
</html>

效果展示

子木_Lee

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript（二）——轮播图

轮播图自动播放需求:有一组图片, 每隔3秒钟,就去切换一张,最终是一直在不停切换技术分析:每隔三秒钟切换图片步骤分析:1. 确定事件: 文档加载完成的事件 onload 2. 事件要触发 : init() 3. 函数里面要做一些事情:(通常会去操作元素,提供交互) 1. 开启定时器:...
复制链接

扫一扫