css轮播图如何实现？

猿友 2021-04-20 18:03:48 浏览数 (3475)

在往期文章小编介绍过 JS 如何实现轮播图。那么这篇文章我们来介绍另一种方法：CSS 轮播图如何实现。

实现效果

CSS实现轮播图效果

实现思路

用 CSS 实现图片轮播主要是用到 CSS3 animation 属性和 @keyframes。首先将要进行轮播的图片放入一个 div 内，此 div 的宽度设置为多张图片宽度的总和。在此 div 外再设一个 div，将此 div 的宽高设置为一张图片的宽高，并将 overflow 设置为 hidden。

随后设置动画属性，此处轮播总共有四张图片，所以添加四个动画阶段，0%-20% 是第一张图片的动画阶段，20%-25% 是停留阶段，以下以此类推。

具体代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS如何实现轮播图 - 编程狮(w3cschool.cn)</title>
	<style type="text/css">
		div{
			width: 300px;
			height: 168px;
			overflow: hidden;
		}
		#lunbotu{
			width: 1200px;
			animation: lunbotu 6s linear  ;/*lunbotu为动画名称，此动画持续6s，速度相同*/
		}
		#lunbotu>img{
			float: left;
			width: 300px;
		}
		@-webkit-keyframes lunbotu{
		0%,20%{
			margin-left: 0;
		}
		25%,45%{
			margin-left: -300px;
		}
		50%,70%{
			margin-left: -600px;
		}
		75%,100%{
			margin-left: -900px;
		}
		}

	</style>
</head>
<body>
	<div>
		<div id="lunbotu">
			<img src="https://atts.w3cschool.cn/attachments/cover/cover_css_txy.jpeg?t=1599114933" alt="">
			<img src="https://atts.w3cschool.cn/attachments/cover/cover_my_qianduan.jpeg?t=1587609360" alt="">
			<img src="https://atts.w3cschool.cn/attachments/cover/cover_css_job_my.png?t=1607312870" alt="">
			<img src="https://atts.w3cschool.cn/attachments/cover/cover_qianduan_rygh.png?t=1609142979" alt="">
		</div>
	</div>
</body>
</html>

以上就是 CSS 轮播图如何实现的全部内容。更多 CSS 学习请关注 w3cschool 官网。