Question

图片轮播怎么做

Answer 1

图片轮播做法如下：

我们第一步就是要构架好整个轮播的盒子，以及它所需要的内容。（附属图是为了轮播切换图片的时候不会出现空白）

然后就是设置轮播盒子的大小以及里面按钮的样式。先做一个页面的css初始化再开始设置样式。

设置轮播盒子大小和轮播图片大小。（将浏览器缩小到50%看到的效果）

设置定位将图片固定在轮播盒子里，再设置轮播最初显示的第一张图片出现在轮播盒子里（要设置行内样式才能获取得到）。

设置轮播切换图片的四个按钮（不一定是小圆点也可以是别的）。

思路

主要通过一个展示盒子，一个图片储存盒子，展示盒子的大小即为轮播图想要展示图片的大小，或者说一个图片的大小。但储存盒子的宽度必须大一些，足够所有的图片左浮横向排列。后将储存盒子的溢出部分隐藏，再调用动画特效animation。

animation详解

@keyframes指动画过程中每一个画面，也可以说是电影中的每一帧。我们可以设置0到100%的每个画面。