（自学收获）纯css网页小部件--轮播图效果_0%,20%{ margin-left: 0px; }-优快云博客

本文链接：https://blog.youkuaiyun.com/web_magic/article/details/70655044

本文分享了使用CSS3制作轮播图的经验，利用overflow和animation实现图片切换，并尝试了结合鼠标悬停交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天是个悲伤的日子，由于我对css3标签理解的不深刻，所以直到现在只能写一篇留有遗憾的收获小博客（ps：已经抓掉了好几根头发）

轮播图效果我是用overflow这个“框”，加上css3的新属性animation配合@keyframes来制造轮播图效果。

步骤：用overflow来控制只显示一个图片大小，将所有图片float到一横排，通过margin左移或者右移来实现图片的转换。

animation来设置总时间，@keyframes来分配每个图片用时，每个图片切换的过程留一部分时间可以让图片有停留的。

本来做了一个列表，来实现鼠标悬停在列表项上的时候实现一个对应图片的选择效果，结果失败了 GG。很可能是~选择器用的有瑕疵。写的每一个小部件都是我的一部遗憾史。好疲惫，好想流眼泪。

效果图：

html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>turnpictures</title>
	<link rel="stylesheet" href="turnpic.css">
</head>
<body>
	<div class="wrapper">
		<div class="pics">
			<img src="pictures/pic1.jpg" >
			<img src="pictures/pic2.jpg" >
			<img src="pictures/pic3.jpg" >
			<img src="pictures/pic4.jpg" >
			<img src="pictures/pic5.jpg" >
		</div>
		<div class="lists">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ul>
		</div>
	</div>
	
</body>
</html>

css：

* {
	padding: 0;
	margin: 0;
}
.wrapper {
	position: relative;
	width: 300px;
	height: 200px;
	overflow: hidden;
	border-radius: 10px;
}
.pics {
	position: absolute;
	width: 1500px;
	animation: pic 30s ease-out infinite alternate;
}
.pics img {
	width: 300px;
	height: 200px;
	float: left;
}
@keyframes pic {
			0%,20% {        margin-left: 0px;       }  
            25%,40% {       margin-left: -300px;    }  
            45%,60% {       margin-left: -600px;    }  
            65%,80% {       margin-left: -900px;    }  
            85%,100% {      margin-left: -1200px;   }  
}
.lists {
	position: absolute;
	left: 180px;
	bottom: 5px;
	width: 120px;
	height: 20px;
	display: inline-block;
}
.lists ul {
	display: inline-block;
	width: 100%;
	height: 20px;
	line-height: 20px;
	text-align: center;
}
.lists ul li {
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	color: #000;
	background-color: #c0c;
	opacity: .8;
	cursor: pointer;

	transition: all 0.4s ease-in-out;
}
ul li:hover {
	color: #fff;
	background-color: #80c;
}