HTML动态（跑马灯，轮播，音频，视频......）

最新推荐文章于 2024-06-21 13:41:49 发布

LaoXieyyds

最新推荐文章于 2024-06-21 13:41:49 发布

阅读量589

点赞数 2

文章标签： html 音视频 css

本文链接：https://blog.csdn.net/LaoXieyyds/article/details/126038521

版权

跑马灯

跑马灯，就是所需的文字或者图片，在网页上移动。
下面是一个简单的跑马灯

<!doctype html>
<html lang="en">
<html>
	<head>
		<title>跑马灯页面</title>
	<meta charset="utf-8">
		<style type="text/css">
			body{background-color:skyblue;
			background-width:500px;
			background-height:500px;
				}
		</style>
	</head>
<body>
	<marquee direction="right" behavior="slide">
		<img src="images/t5.jpg" width="50px" height="50px">
	</marquee>
</body>
</html>

marquee标签，它是成对出现的标签，首标签到尾标签之间的内容就是滚动内容，direction=""用来设置滚动的方向，right是从左到右滚动，behavior属性，里面填的参数值为alternate、scroll、slide中的一个，分别表示文字来回滚动、单方向循环滚动、只滚动一次。
在这里插入图片描述

音频和视频

<!doctype html>
<html lang="en">
<html>
	<head>
		<title>音频页面</title>
	<meta charset="utf-8">
	</head>

<body>
	<video src="images/1.mp4" poster="images/t3.jpg" autoplay="autoplay" controls="controls" width="500px" height="400px">
	</video>
	<video src="images/2.mp3"autoplay="autoplay" controls="controls" width="500px" height="400px">
	</video>
</body>
</html>

src="“用于引用外部文件，.mp4是视频格式，.mp3是音频格式。poster=”"带有预览图（海报图片）的视频播放器，能够使视频封面变换成其他图片。autoplay=“autoplay”，规定一旦音频就绪马上开始播放，如果设置了该属性，音频将自动播放。 controls=“controls”，规定浏览器应该为视频提供播放控件，如果设置了该属性，浏览器控件应该包括：. 播放. 暂停. 定位. 音量. 全屏切换. 字幕（如果可用），这就是用来设置下方播放器样式。
在这里插入图片描述

轮播图

<!doctype html>
<html lang="en">
<html>
	<head>
		<title>轮播</title>
	<meta charset="utf-8">
		<style>
			#container{
			width:400px;
			height:400px;
			overflow:hidden;
			}
			#photo{
			width:2000px;
			animation:switch 10s ease-out infinite;
			}
			#photo > img{
			float:left;
			width:400px;
			height:400px;
			}
			@keyframes switch{
				0%,15%{
				margin-left:0;
				}
				20%,35%{
				margin-left:-400px;
				}
				40%,55%{
				margin-left:-800px;
				}
				60%,75%{
				margin-left:-1200px;
				}
				80%,100%{
				margin-left:-1600px;
				}
			}
		</style>
	</head>
<body>
	<div id="container">
		<div id="photo">
			<img src="1.jpg">
			<img src="2.jpg">
			<img src="3.jpg">
			<img src="4.jpg">
			<img src="5.jpg">
			<img src="6.jpg">
		</div>
	</div>
</body>
</html>