css 实现轮播图效果

一、需要的属性

实现轮播图效果主要用到 overflow、animation、animation–direct ion、transform这几个属性

属性	作用
overflow	主要用于设置盒子的属性,规定当内容溢出元素框时发生的事情,这个属性主要有这个设置值
animation	设置元素的动画效果
ani m a t ion-direct ion	用来定义是否应该轮流反向播放动画的
transform	描述了元素的静态样式,本身不会呈现动画效果,可以对元素进行旋转,倾斜,缩放,移动,以及矩阵变形 matrix。

二、轮播图制作

1.第一步：编写 html 文件，写两个 div，一个用来展示图片，一个用来存放所有图片。
代码如下：

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/RotationChart.css">
</head>
<body>
    <div class="continer">
        <div class="child">
            <img src="./img/1.jpg" >
            <img src="./img/2.jpg" >
            <img src="./img/3.jpg" >
            <img src="./img/4.jpg" >
            <img src="./img/5.jpg" >
        </div>
    </div>
</body>
</html>

2.第二步：编写 css 样式
首先需要定义 continer 容器的样式,还有每张图片的大小

.continer{
    margin: 100px auto;
    height: 300px;
    width: 400px;  
    border:4px solid blue;
    overflow: hidden;
    background-color: red;
    position: relative;
}
img{
    height: 300px;
    width: 400px;
}

每张图片的高和宽要和展示它的div大小一样

效果：
在这里插入图片描述

可以看到展示图片的框框显示了出来，如果没加over flow: hidden;这个属性的话就是下面这个样子
在这里插入图片描述

可以看到用来展示的容器被挡住了，我们希望的是让多余的图片隐藏起来，轮到它的时候才显示出来所以就要加over flow属性。
3.第三步：定义用来存放图片的div 样式
 代码：

.child{
    display: flex;
    height: 300px;
    width: 2000px;
    animation:video 20s infinite;
	animation-direction:alternate;
}

采用flex横向布局，让5张图片都放在一行。
这里的宽度2000px就是400p x乘以图片数量得到的2000p x；
animation用来声明动画，第一个参数是关键帧的名字，第二个参数是播放完轮播图需要的时间，第三个参数就是播放的次数，inf inite是无限次。
animation-direct ion用来定义反复播放轮播图

4.第四步：最后一步就是定义关键帧让轮播图动起来
代码：

@keyframes video {
    0%{
        transform: translateX(0);
    }
    25%{
        transform: translateX(-400px);
    }
    50%{
        transform: translateX(-800px);
    }
    75%{
        transform: translateX(-1200px);
    }
    100%{
        transform: translateX(-1600px);
    }
}

translateX就是将图片向左或向右平移多少个像素。

CSS完整代码：

body{
    margin:0px;
}
.continer{
    margin: 100px auto;
    height: 300px;
    width: 400px;  
    border:4px solid blue;
    overflow: hidden;
    background-color: red;
    position: relative;

}
@keyframes video {
    0%{
        transform: translateX(0);
    }
    25%{
        transform: translateX(-400px);
    }
    50%{
        transform: translateX(-800px);
    }
    75%{
        transform: translateX(-1200px);
    }
    100%{
        transform: translateX(-1600px);
    }
}

.child{
    display: flex;
    height: 300px;
    width: 2000px;
    animation:video 20s infinite;
	animation-direction:alternate;
}

img{
    height: 300px;
    width: 400px;
}