【css轮播图】静态网页仅使用 HTML+CSS实现图片轮播效果

学生制作简单网页时如何不使用JavaScript实现图片轮播效果呢？这里STU网页教大家仅使用CSS通过CSS3 animation 属性和 @keyframes 规则来实现图片轮播切换效果，代码非常简单，首先我们来看下实际效果。

首先思路如下准备相同大小的多个图片，然后将要展示图片横排放在一个图片容器里面，在图片容器外再加一个展示容器，展示容器大小为图片大小。给图片容器添加自定义动画，在动画不同阶段设置递增的偏移值。
其次动画效果分为切换和停留两部分，自定义动画阶段与图片数量相关，动画各阶段偏移值与图片大小相关。

HTML代码

<div id="container">
    <div id="banner">
        <img src="images/1.jpg" />
        <img src="images/2.jpg" />
        <img src="images/2.jpg" />
    </div>
</div>

CSS代码

#container {
	width: 400px;
	height: 300px;
	overflow: hidden;
}
/* 容器大小和图片大小一致 */
 
#photo {
	width: 1200px;
	animation: switch 5s ease-out infinite;
}
/* 图片宽度*图片数量 */

#photo > img {
	float: left;
	width: 400px;
	height: 300px;
}
/* 图片大小 */

@keyframes switch {
	0%, 25% {
		margin-left: 0;
	}
	35%, 60% {
		margin-left: -400px;  /* 图片宽度 */

	}
	70%, 100% {
		margin-left: -800px; /* 图片宽度*2 */

	}
}

以上示例只有三个图片，所以添加了三个动画阶段，每一阶段都是通过设置递增的 margin-left 值达到切换的，效果设置的动画阶段（如：35%~60%）是动画停留部分，和上一阶段空余时间（如25%~35%）即为动画切换部分，各部分时间长短需要自己把控。