不使用 js 实现一个轮播

参考链接： http://qiutc.me/post/carousel-without-javascript.html

前提是只兼容现代浏览器。

原理

主要用的原理：

• CSS3 element+element 选择器（相邻兄弟选择器），element+element 选择器用于选取第一个指定的元素之后（不是内部）紧跟的元素。

• CSS3 element1~element2 选择器，element1~element2 选择 element1 之后出现的所有 element2。两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1。

• CSS3 :checked 选择器，:checked 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）。

• HTML5 label 标签的 for 属性。

实现的效果：

• 轮播图片的前进后退
• 选择某张图片
• 图片切换的淡入淡出

实现不了的：

• 自动轮播
• 滑动的轮播切换