不使用 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 属性。

实现的效果:

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

实现不了的:

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