html5滑动图片轮播代码 html中图片轮播css代码

 

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

具体步骤：

1.准备相同大小的多个图片
2.将图片横排放在一个图片盒子里
3.在图片盒子外再加一个展示盒子，展示盒子大小为图片大小
4.给图片盒子添加自定义动画，在动画不同阶段设置递增的偏移值

注意事项：

1.动画效果分为切换和停留两部分
2.动画各阶段偏移值与图片大小有关
3.可以在最后再放一张第一张图片，可以使切换更自然。

 HTML代码:

<div id="container">
    <div id="photo">
        < 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%）即为动画切换部分，各部分时间长短需要自己把控
运行效果