css实现图片轮播

利用css3 animation 属性和 @keyframes 实现图片轮播效果

具体步骤：

1.准备相同大小的多个图片

2.将图片横排放在一个图片盒子里

3.在图片盒子外再加一个展示盒子，展示盒子大小为图片大小

4.给图片盒子添加自定义动画，在动画不同阶段设置递增的偏移值

注意事项：

1.动画效果分为切换和停留两部分

2.动画各阶段偏移值与图片大小有关

3.可以在最后再放一张第一张图片，可以使切换更自然。

HTML代码:

<div >
    <div >
        < img src="1.png" />
        < img src="2.png" />
        < img src="3.png" />
        < img src="1.png" />
    </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;
 }
}

解析：

展示盒子大小和图片大小一致

给图片添加 float 效果，不用考虑margin问题

由于示例只有三个图片，所以添加了三个动画阶段，每一阶段都是通过设置递增的 margin-left 值达到切换的效果

设置的动画阶段（如：35%~60%）是动画停留部分，和上一阶段空余时间（如25%~35%）即为动画切换部分，各部分时间长短需要自己把控

运行效果