超简易的轮播图(JavaScript)

Posted ZSYL

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了超简易的轮播图(JavaScript)相关的知识,希望对你有一定的参考价值。

简易的轮播图

展示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

代码

<!DOCTYPE>
<html lang="en">
<head>
		<meta charset="UTF-8">
		<title>轮播图</title>
		
		<script>
				var num=1;
		
				function fun(){
					//获取对象
					var imgChange=document.getElementById("image");
					num++;
					if(num>3){
						num=1;
					}
					//图片路径
					imgChange.src="./Journey/banner"+num+".jpg";
				}
				//定时3秒
				setInterval(fun,3000);
				
		</script>
</head>

<body>
		<img src="./Journey/banner1.jpg" width="100%" height="300" id=image>
		
<body>
</html>

感谢!

加油!

以上是关于超简易的轮播图(JavaScript)的主要内容,如果未能解决你的问题,请参考以下文章

各种各样的轮播图

JavaScript实现的轮播图

简单的轮播图代码

原生JS实现简易轮播图

层叠轮播图的简易制作

原生javascript手写一个丝滑的轮播图