CSS无缝轮播图

发表于 | 更新于 | 分类于

css3中 @keyframe 的存在可以逐帧对页面操作，能很方便的创建各种动画效果，相对于js动画，css动画的代码更加简单，性能也更好，当然css动画也存在其局限性，难以控制，代码冗长及浏览器兼容问题，孰优孰劣不予判断。在此利用css3强大的动画效果来实现个简单的无缝自动轮播图

轮播图原理

轮播图原理示意图
我们将需要轮播的图片设置相同尺寸平铺，设定只显示一张图片大小的区域，超过此区域的隐藏，然后利用偏移量来显示图片

轮播图布局

以4张图片轮播为例

.banner即我们的显示区域，设定显示区域为一张图片的大小并设置溢出隐藏
.slider即滚动区域，将需要轮播的图片设置好尺寸，左浮动横向平铺
为了实现无缝轮播，还需要在第4张图片后多插入第1张图片。用了ul-li来布局，也可以用div

1
2
3
4
5
6
7
8
9
<div class="banner">
    <ul class="slider">
        <li class="slider_img"><img src="img/1.jpg"></li>
        <li class="slider_img"><img src="img/2.jpg"></li>
        <li class="slider_img"><img src="img/3.jpg"></li>
        <li class="slider_img"><img src="img/4.jpg"></li>
        <li class="slider_img"><img src="img/1.jpg"></li>
    </ul>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
* {
    margin: 0;
    padding: 0;
    list-style: none;}  /*清除ul-li格式*/
.banner {
    width: 400px;
    height: 250px;
    overflow: hidden;}  /*溢出隐藏*/
.slider {
    position: relative;
    width: 2000px;}
.slider_img {
    float: left;}
img {
    width: 400px;
    height: 250px;}

animation、@keyframe

1
animation: name duration timing-function delay iteration-count direction;
  • name：绑定到keyframe的名称
  • duration：完成动画所需的时间（单位为秒或者毫秒）
  • timing-function：动画速度曲线
  • delay：动画第一次开始前延迟时间
  • iteration-count：播放次数（取值为播放次数或者infinite）
  • direction：是否应该轮流反向播放动画（normal为正常播放，alternate为轮流反向播放）
1
2
3
4
@keyframe name {
    0%{ css-styel; }
    ...
    100%{ css-style; }}

规定某一时刻，样式属性,@keyframe会在规定的时刻将某一样式转换为另一种样式
0-100%为关键帧，也可以用 form（同0%）与 to（同100%）来代替

轮播图动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.slider {
    -webkit-animation: banner 10s infinite 1s;
    -o-animation: banner 10s infinite 1s;
    animation: banner 10s infinite 1s;}
@keyframes banner {
    0% {
        transform: translateX(0px);}
    25% {
        transform: translateX(-400px);}
    50% {
        transform: translateX(-800px);}
    75% {
        transform: translateX(-1200px);}
    100% {
        transform: translateX(-1600px);}}


算上多插入第1张图片，共5张图片，@keyframe也设置5个时间节点，通俗来说每个时间节点包含动画的两个状态，进入与退出 ，因为第1张图片在动画开始前已经显示，所以节点1（0%）只包含 退出 状态，节点2（25%）、节点3（50%）、节点4（75%）包含 进入与退出 ，而节点5（100%）只包含 进入 状态，并在之后之后直接跳转到节点1，所以节点1与节点5需要设置为同一张图片，并且设置1s的动画播放延迟使动画第一次开始播放时更加自然