首页 > 代码库 > 如何利用CSS3实现完备的幻灯片(1)

如何利用CSS3实现完备的幻灯片(1)

概述:我所谓完备的幻灯片,乃指满足下列条件的页面效果:

1、包含左右箭头;

2、左右箭头能无限点击,产生无限循环切换的效果;

2、图片具有滑动效果;

3、包含与图片一一对应,用以切换的选项块;

4、选项块拥有两个状态,其一为普通,其二为「当前」,后者反映其自身与当前显示区的图片具有对应关系,该对应关系必须随时有效;

5、图片自动播放,并无限循环;

6、鼠标进入图片时,图片暂停播放;

7、鼠标离开图片时,图片按当前顺序继续播放,无限循环。

如上,它完备,未必完美。

 

本着循序渐进的原则,我先从利用css实现tab切换效果讲起,它用上了与将要实现的完备之幻灯片一样的模式。、

 

「Tab切换」是网页中常见的效果:鼠标进入某个选项卡时,显示与该选项卡对应的模块内容,同时隐藏其他选项卡所对应的模块内容。

 

要用CSS来实现这个效果,第一个要求就是「如何让选项卡选中某个元素」。前人摸索出了「input + label」模式,下面是实现思路:

 

1、将input放到「要实现tab功能的Html代码模块」的上面,设置type为单选按钮radio;

2、让label标签作为tab功能中的选项卡,当它被点击时,它将激活其所对应的「放在上边」的input标签,使其进入checked状态;

3、当某个input标签处于特殊状态时,使用 ~ 兄弟元素选择器和后代选择器,一个个设置tab区的元素所要呈现的样式(此处是显示/隐藏);

 

单选的radio组的checked在同一时间只有一个有效,即便你手动为所有radio写上「cheaced=”checked”」,也只有最后一个进入checked状态。因此,利用css,在每一个checked状态下,有且只有一个内容块显示,其他则隐藏,就模拟了tab切换。

 

当然,它也并非完美模拟,这个css实现的tab只对点击事件有反应。

 

核心代码:

#label01:checked ~ #content li:nth-child(1) {
display:block;
}

 

#label01:checked ~ #content li:nth-child(2),

#label01:checked ~ #content li:nth-child(3),

{
display:none;
}

 

DEMO:http://codepen.io/lucifier/pen/gwCEJ?editors=110

 

Ps:初来乍到,对博客园的编辑器并不熟悉,所以难以直接将代码写在正文内。不过,我也没觉得这样特别不妥,html、css与javascript分离政策,或许在前端文章中依然有效(正文与大段代码分离)。之前我看别人的文章,对代码部分要么略过,要么复制黏贴,极少细看。那些写在正文内只有几行的、能反映思路的核心代码,我才认真看了罢。