javaScript实现轮播图

最新推荐文章于 2020-03-02 21:00:25 发布

孤独的看着星星流泪

最新推荐文章于 2020-03-02 21:00:25 发布

阅读量306

点赞数

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

本文链接：https://blog.csdn.net/qq_24832821/article/details/79421789

版权

html 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

javaScript

9 篇文章 0 订阅

订阅专栏

一.需求分析

在首页完成对轮播图的效果实现,完成自动切换图片的功能。

二.技术分析

获取元素 document.getElementById(“id 名称”)
事件(onload)
定时操作： setInterval(“changeImg()”,3000);

1.setInterval定时器

三.代码实现

1.切换图片.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>切换图片</title>
		<style>
			div{
				border: 1px solid white;
				width:500px ;
				height: 350px;
				margin: auto;
				text-align: center;
			}
		</style>
		<script>
			var i=1;
			function changeImg(){
				i++;
				document.getElementById("img1").src="../../img/"+i+".jpg";
				if(i==3){
					i=0;
				}
			}
		</script>
	</head>
	<body>
		<div>
			<input type="button" value="下一张" οnclick="changeImg()"/>
			<img src="../../img/1.jpg" width="100%" height="100%" id="img1"/>
		</div>
	</body>
</html>

2.轮播图.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>轮播图</title>
		<style>
			#father{
				border: 0px solid red;
				width: 1300px;
				height: 2170px;
				margin: auto;
			}
			
		</style>
		<script>
			function init(){
				//书写轮图片显示的定时操作
				setInterval("changeImg()",3000);
			}
			
			//书写函数
			var i=0
			function changeImg(){
				i++;
				//获取图片位置并设置src属性值
				document.getElementById("img1").src="../img/"+i+".jpg";
				if(i==3){
					i=0;
				}
			}
		</script>
	</head>
	<body οnlοad="init()">
		<div id="father">
		
			
			<!--轮播图部分-->
			<div id="">
				<img src="../img/1.jpg" width="100%" id="img1"/>
			</div>
		
		</div>
	</body>
</html>

孤独的看着星星流泪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javaScript实现轮播图

一.需求分析在首页完成对轮播图的效果实现,完成自动切换图片的功能。二.技术分析获取元素 document.getElementById(“id 名称”)事件(onload)定时操作： setInterval(“changeImg()”,3000); 1.setInterval定时器三.代码实现1.切换图片.html&lt;!DOCTYPE html&gt;&lt;html&gt...
复制链接

扫一扫

专栏目录