html5怎么实现图片轮播

发布时间：2022-01-20 15:43:25 作者：iii
来源：亿速云阅读：394

这篇文章主要介绍了html5怎么实现图片轮播的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇html5怎么实现图片轮播文章都会有所收获，下面我们一起来看看吧。

1.首先我们在开发工具中新建一个 html 文件，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
	</head>
	<body>
		
	</body>
</html>

2.在完成之后呢，我们需要在 html 的主体部分添加一个div标签，设置盒子的宽高以便用来放入图片，并且在div标签中在加入img标签，在将需要的图片路径输入在img标签中即可，代码如下：

<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
	</head>
	<body>
		<div>
			<img src="img/1.png" />
		</div>
	</body>
</html>

3.完成之后，我们使用内嵌式方法设置样式在头部添加我们需要的css样式，从而实现控制效果。代码如下：

<html>	<head>		<meta charset="utf-8">		<title>轮播图</title>		<script type="text/javascript" src="js/轮播图.js"></script>		<style>			img{				width: 600px;				height: 450px;			}		</style>	</head>	<body>		<div >			<img  src="img/1.png" />		</div>	</body></html>

4.完成上面步骤之后我们可以在预览页面看到我们的图片效果，那么接下来我们在body标签中添加 js 事件onload，也就是当我们在加载该页面的时候，通过调用onload的值的对应的方法，然后我们再为img添加一个id属性，这样可以方便我们下一步的操作！代码如下：

<html>	<head>		<meta charset="utf-8">		<title>轮播图</title>		<script type="text/javascript" src="js/轮播图.js"></script>		<style>			img{width: 600px;height: 450px;}		</style>	</head>	<body onload="init()">		<div >			<img id="myimg" src="img/1.png" />		</div>	</body></html>

5.完成之后呢，我们新建一个 .js 文件添加如下代码（在我们的开发中应该新建一个新的 .js 文件从方便开发），从而完成我们需要的轮播的功能。在代码中setInterval(code,time);的两个参数都是必须的要填写的，其中code是指代执行的方法或者代码串，time是用来表示图片直接的时间间隔（以毫秒计，1000就是1秒，根据需要来调整）。其中if语句中i的值跟图片的数量和命名有关。代码如下：

function init(){			 window.setInterval(changeImg,1000)			}			     var pathArr = new Array(			  "img/1.png",			  "img/2.png"			  );			     var index = 0;			function changeImg(){			 myimg = document.getElementById("myimg");			 index ++;			 if(index>=pathArr.length){			  index = 0;			 }			 myimg.src = pathArr[index];			}

关于“html5怎么实现图片轮播”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“html5怎么实现图片轮播”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。

html5怎么实现图片轮播

相关阅读