# 手动实现轮播图
使用纯`HTML`、`CSS`、`JavaScript`实现轮播图功能。
## position
使用`position`的绝对定位与相对定位实现轮播图，首先将图片全部拼接成为一行，使用`overflow: hidden;`将其他图片隐藏，将这一行图片加入定时任务不断进行左移，从而只显示中间的图片，对于边缘特殊处理，将第一张轮播图追加到一行图片之后，当切换到最后一张轮播图时，下一张即播放第一张图，当此图轮播完成后，将所有图片归位，提供两个`DEMO`，第一个是单纯的轮播不存在任何控制按钮，第二个则比较完善。
### 实例
```html
轮播图
```
```html
轮播图
```
## opacity
首先通过对图片绝对定位来使图片堆叠，通过使用`opacity`来控制图片的显示与隐藏，即不使用`Js`控制轮播图的切换动画，而使用`CSS`动画来完成，由于是堆叠完成的，使用`z-index`也是可行的方案。
### 实例
```html
轮播图
```
## CSS
纯`CSS`实现轮播图，完全使用`CSS3`动画完成轮播，主要使用`animation`属性与`@keyframes`规则，使用`left`控制距离，也可以使用`opacity`，为每个图片设置动画属性即可。
### 实例
```html
轮播图
```
## 每日一题
```
https://github.com/WindrunnerMax/EveryDay
```
