纯css3：radio+label实现轮播图

html-css025

纯css3：radio+label实现轮播图,第1张

预览地址： 纯css3：radio+label实现轮播图

轮播图这东西，我相信只要是做前端的，肯定都做过，不过大部分应该都是用js来实现的，其实css3也是可以实现轮播图的，而且也可以加一些动画之类的，下边就分享下思路。声明，这里没有贬低 js 的意思，相反， js 能做的， css 基本做不到， css 能做的， js 基本能做到，这里纯粹就是为了分享 css 的一些运用。

css 里有个可以绑定到 <input>上的标签 <label>，它的功能就是当你点击所绑定的这个 <label>的时候，就可以选中相应的 <input>，既然有了这个功能，那就有了控制轮播图的方法了。

通过 css 可以看到，其实这个例子主要用到的就是 <input type="radio">的 :checked 伪类选择器然后通错 css3 的 :nth-of-type(n) 节点选择器控制与之相对应的轮播、按钮，整个例子也没什么难度，也就不废话了。

1、首先我们创建一个简单的项目，如图所示包括html，css和img三个。

2、这里是html文件，引入css和html代码文件，如图所示。

3、这里是css文件代码，上面是div和图片显示的效果代码，后面是动画效果。

4、这里是事件，这里定义了四个时间段的状态，兼容了ie的。

5、如图所示这里是效果图，会根据时间轮播显示下一张图片 了。

很难，而且只能用淡入淡出，同时存在兼容性问题。详情可以搜索利用CSS3制作淡入淡出动画效果

不过还是不建议这么搞，因为太不好维护。通常轮播内容是可以通过后台管理的，js可以控制所有的轮播内容块，而css不能，增加或减少一个轮播块都需要修改css声明，麻烦的很。而且css的动画效果无法和鼠标事件交互（例如鼠标悬停需要暂停轮播，纯css动画目前还做不到）。