如何利用CSS3实现完备的幻灯片（1）

标签：http   style   code   java   size   javascript   tar   get   tab   type   html   

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

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分离政策，或许在前端文章中依然有效（正文与大段代码分离）。之前我看别人的文章，对代码部分要么略过，要么复制黏贴，极少细看。那些写在正文内只有几行的、能反映思路的核心代码，我才认真看了罢。

如何利用CSS3实现完备的幻灯片（1）,搜素材,soscw.com

如何利用CSS3实现完备的幻灯片（1）

标签：http   style   code   java   size   javascript   tar   get   tab   type   html   

原文地址：http://www.cnblogs.com/jade129/p/3695520.html