前端-如何利用html快速地制作一个轮播图_html实现轮播图

不入虎穴，焉得虎子。要想知道这轮播图的运作原理，还得打下一层基础——了解一个名为animation的属性。
1

• 第一步：写出animation属性；
  管他三七二十一，先把这个标签写上再说。然后就出现了下面这一行代码块，乍一看这不是CSS代码中的速写格式吗。没错，animation属性也分很多个子属性，既然有速写格式，那分开也不会错，通常以animation-xxx的形式出现。

animation: name duration timing-function delay iteration-count direction fill-mode;
1

• 第二步：分析每一个属性的作用；
  animation-name:动画的名字
  –可以与@keyframes中定义的动画名字绑定
  animation-duration:动画持续时间
  –动画完成一个循环所需要的时间长度；单位s，ms
  animation-timing-function:动画的速度曲线
  –取值有：ease（先快后慢）、linear（匀速）、ease-in（先慢后快）、ease-out（先快后慢）、ease-in-out（先慢后快再慢）、step()（逐帧播放）
  animation-delay:动画延迟执行时间
  –单位s，ms
  animation-iteration-count:动画迭代次数
  –infiniter（无限循环）、默认值为1
  animation-direction:动画方向
  –动画运行是否交替方向或者是重置起点；reverse（顺序反转）、alternate（顺序交替反转）、alternate-reverse（与alternate类似不过第一次不反转）
  animation-fille-mode:填充模式
  –指定了CSS动画在执行前和执行后如何将样式应用到他的目标上；forwards（当前元素在动画结束的最后一帧显示的位置） 、backwards（当前元素在动画结束后再动画开始的位置显示）。

结论：从中我们又发现了一个新的关键字@keyframes，而这个@keyframes才是动画最关键的零件，该关键字在css样式中书写，格式如下：

    @keyframes identifier {
        from {

        }
        to {
            
        }
    }
1
2
3
4
5
6
7
8

而identifier不难看出是自定义的动画名称，照应上方的animation-name。其中的from和to两个关键字，相信以及不难想到，from是动画开始时的状态，to是动画经过改变之后的状态。

• 第三步：理解轮播图
  轮播图是什么？
  我们为了方便理解大致可以这样解释，有一个相框，这个相框有一个神奇的功能，他可以每隔一段时间更换一张照片，大家也可以将他理解为电脑桌面的切换屏保。而在轮播图中，我们也需要有一个相框，相框中有一个很长很长的画布，画布上不间断的画着很多张画，而这张画布则会从左往右走，这时，呈现给我们的相框就像在每隔一段时间就换一张画一样。
  理论已经掌握，我们开始实践。
• 第四步：给出框架往里嵌套

<div class="eye">
        <div class="wrap">
            <div class="item">
                <img src="./p1.png" alt="">
            </div>
            <div class="item">
                <img src="./p2.jpg" alt="">
            </div>
            <div class="item">
                <img src="./p3.jpg" alt="">
            </div>
            <div class="item">
                <img src="./p4.png" alt="">
            </div>
        </div>
    </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

不难看出，eye类名为相框，wrap类名为画布，而wrap里的每一个div就相当于一幅画。
1

现在给它们加上css样式：

.eye {
        width: 350px;
        height: 400px;
        border: 5px solid #333;
        margin: 100px auto;
        /* 为防止我们看到相框大小以外的画布，将其他画布区域隐藏 */
        overflow: hidden;
    }
    /* 图片的容器 */
    .wrap {
        width: 1400px;
        height: 400px;
        margin-left: 0;
        /* 
        这里的4指的是有四张图片
        step(4)逐帧播放，此处需注意若不采用step则没有轮播图效果，不妨试试改为linear 
        */
        animation: move 5s infinite steps(4);
    }
    .item {
        width: 350px;
        height: 400px;
        /* 将每一副画浮动到画布上 */
        float: left;
    }
    img {
        width: 350px;
        height: 400px;
    }
    @keyframes move {
        from {
            margin-left: 0px;
        }
        to {
            /* 逐帧播放-1400px */
            margin-left: -1400px;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

下面是成品：
❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀

❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀