CSS实现轮播图结果（附代码）

轮播图在一个网页页面中是很主要的，它展示了网页的主题内容，目的在于吸援用户的眼球。下面就让我们看看用纯CSS怎样实现轮播图的吧。

注意事项

• 动画结果分为切换和停顿两局部

• 自定义动画阶段与图片数目相干

• 动画各阶段偏移值与图片大小相干

• 本文中示例最后一个图片到首先个图片没有切换结果，一个思绪是可以由最后一个图片再受个切换到首先个图片

HTML

解析：
这里新建了三个 img 元素，img 元素外面是图片容器，图片容器外面是展现容器。

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;
	}
}

解析：

1、展现容器大小和图片大小一致

2、图片增加 float 结果，不消考虑费事的 margin 题目

3、因为示例只要三个图片，所以增加了三个动画阶段，每一阶段都是通过设定递增的 margin-left 值达到切换的结果

4、设定的动画阶段（如：35%~60%）是动画停顿局部，和上一阶段空余工夫（如25%~35%）即为动画切换局部，各局部工夫长短需要本人把控

运转结果

谢谢大家的浏览，但愿大家收益多多。

本文转自：https://blog.csdn.net/u011848617/article/details/80468463

举荐教程：《CSS教程》

以上就是CSS实现轮播图结果（附代码）的细致内容，更多请关注 百分百源码网 其它相干文章！