html5图片轮播怎么做?图片轮播图做法解析！

2021-05-28 10:59:13 浏览数 (13128)

我们在浏览网页的时候是不是看到很多网页中的图片会有变化，那么今天我们也来学习下怎么通过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];
			}

通过以上步骤之后我们就可以得到一个喜欢的轮播图了，今天的分享就到这里了，其实还有很多的方法我们都可以在w3cschool中进行方面的学习和了解。

w3cschool 编程狮，随时随地学编程

html5图片轮播怎么做?图片轮播图做法解析！