HTML之使用CSS的animation属性实现简单的轮播图功能

最新推荐文章于 2024-09-11 23:16:45 发布

码农小武

最新推荐文章于 2024-09-11 23:16:45 发布

阅读量573

点赞数

分类专栏： Bootstrap v3 文章标签： html css 前端

本文链接：https://blog.csdn.net/yusuhbdybxbdhj/article/details/131458769

版权

Bootstrap v3 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

该文章演示了如何使用HTML和CSS创建一个图片轮播效果。通过在main标签内设置div并赋予特定ID，再嵌套div并添加类名来结构化页面。CSS部分设置了固定宽度，溢出隐藏，图片浮动以及使用动画关键帧实现图片每隔20秒自动切换。每个阶段通过改变margin-left值来平滑过渡到下一张图片。

摘要由CSDN通过智能技术生成

首先写一个main标签，在main标签里写一个div标签并给一个名为banner的id

在id为banner的标签里面写一个div标签并给一个名为photo的类名

在id为photo的标签里面写你需要的img标签需要几个就写几个

结构图：

此时html部分就完成了下面开始css

在css中为main标签设置一个固定宽度
为main下的图片轮播容器banner标签设置一个溢出隐藏属性
为photo标签下的img标签设置向左浮动，并设置一个固定的宽度和高度
然后为photo设置一个宽度这个宽度是有计算公式的，宽度=图片的宽度*图片的数量，例如：图片宽度为1000px，图片的数量为4个，那么这个图片容器的宽度就为4000px，然后为photo这个图片容器标签设置animation：switch 20s infinite;这里20s表示每20s切换一次图片
然后使用@keyframes switch{}在这里面设置每段向左回收多少px

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		main{
			width: 1300px;
			/*margin: 0 auto;*/
		}
		main #banner{
            overflow: hidden;
		}
		main #banner #photo{
			width: 5200px;
			animation: switch 20s infinite;
		}
		main #banner #photo img{
            float: left;
			width: 1300px;
			height: 550px;
		}
		@keyframes switch {
			0%,25%{
				margin-left: 0;
			}
			35%,60%{
				margin-left: -1300px;
			}
			70%,100%{
				margin-left: -2600px;
			}
        }
	</style>
</head>
<body>
<main>
	<div id="banner">
		<div id="photo">
			<img src="https://p1.music.126.net/l1i7KX57U50eLvwD5_mJ9Q==/109951168645896857.jpg?imageView&quality=89">
			<img src="https://p1.music.126.net/CCSShJhfjlCvVz2hq6ycTg==/109951168645905553.jpg?imageView&quality=89">
			<img src="https://p1.music.126.net/coybhbINXGdB6qu20J3dyA==/109951168645882420.jpg?imageView&quality=89">
			<img src="https://p1.music.126.net/BK8a96tG4E3mNyriYhcY_A==/109951168645888553.jpg?imageView&quality=89">
		</div>
	</div>
</main>
</body>
</html>

效果：