【零基础网页开发】第十课图片轮播案例

最新推荐文章于 2023-07-07 20:17:00 发布

ALeSoleil

最新推荐文章于 2023-07-07 20:17:00 发布

阅读量159

点赞数

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/weixin_45582129/article/details/109189406

版权

笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、< img /> 标签

用来显示图片的标签，< src /> 属性用来设置图片来源。

< img src=“img/IMG_8028.PNG” />

二、< script />标签

这里开始写js代码，这个代码用来控制网页上面html标签的逻辑。
俗称 DOM控制 。

.js文件中：返回一个对应的标签对象：

document.getElementById(“对应html中标签的ID值”)

三、工程代码

1. index.html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Picture 1020</title>
		<link rel="stylesheet" type="text/css" href="css/main.css"/>
	</head>
	<body>
		<div id="wrapper">
			<div class="header">
				<div class="logo">
					Lay-Z
				</div>
			</div>
			<div class="main">
				<div id="pictures">
					<img src="img/zyx(1).JPG" />
				</div>
			</div>
			<div class="footer"></div>
		</div>
	</body>
</html>

<script src="js/main.js" type="text/javascript" charset="utf-8"></script>

2. main.css：

body{
	margin: 0;
}
.logo{
	font-size: 20px;
	font-weight: bolder;
	padding: 8px;
	color: purple;
	background-color: skyblue;
}
.main #pictures img{
	width: 80%;
}

3. main.js：

// 获取容器
var pics=document.getElementById("pictures");
var n=2;

// 设置时钟控件，前面为一个函数，后面时间间隔以ms为单位
setInterval( function(){
	pics.innerHTML = "<img src='img/zyx("+n+").JPG' />";
	n++;
	if(n==7){
	 	n=1;
	}
}, 5000);

ALeSoleil

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【零基础网页开发】第十课图片轮播案例

一、< img /> 标签用来显示图片的标签，< src /> 属性用来设置图片来源。< img src=“img/IMG_8028.PNG” />二、< script />标签这里开始写js代码，这个代码用来控制网页上面html标签的逻辑。俗称 DOM控制。.js文件中：返回一个对应的标签对象：document.getElementById(“对应html中标签的ID值”)三、工程代码1. index.html：<!DO
复制链接

扫一扫