使用html5 css3来实现slider切换效果告别javascript css.doc

使用html5+css3来实现slider切换效果告别javascript+css “bd” lt;input checked type=“radio” name=“slider” id=“slider1” lt;input type=“radio” name=“slider” id=“slider2” lt;input type=“radio” name=“slider” id=“slider3” lt;input type=“radio” name=“slider” id=“slider4” lt;input type=“radio” name=“slider” id=“slider5” lt;div id=“sliders” lt;div id=“overflow” lt;div class=“inner” lt;article lt;div class=“info” lt;h1Title1lt;/h1 lt;a href=“#”Description1lt;/a lt;/div lt;img src=“img/pic1.png”/ lt;/article lt;article lt;div class=“info” lt;h1Title2lt;/h1 lt;a href=“#”Description2lt;/a lt;/div lt;img src=“img/pic2.png”/ lt;/article lt;article lt;div class=“info” lt;h1Title3lt;/h1 lt;a href=“#”Description3lt;/a lt;/div lt;img src=“img/pic3.png”/ lt;/article lt;article lt;div class=“info” lt;h1Title4lt;/h1 lt;a href=“#”Description4lt;/a lt;/div lt;img src=“img/pic4.png”/ lt;/article lt;article lt;div class=“info” lt;h1Title5lt;/h1 lt;a href=“#”Description5lt;/a lt;/div lt;img src=“img/pic5.png”/ lt;/article lt;/div lt;/div lt;/div lt;div id=“controls” lt;label for=“slider1”lt;/label lt;label for=“slider2”lt;/label lt;label for=“slider3”lt;/label lt;label for=“slider4”lt;/label lt;label for=“slider5”lt;/label lt;/div lt;div id=“active” lt;label for=“slider1”lt;/label lt;label for=“slider2”lt;/label lt;label for=“slider3”lt;/label lt;label for=“slider4”lt;/label lt;label for=“slider5”lt;/label lt;/div lt;/div 上面的代码是主要的html结构，其中包含了一个input radio组，你可以在这里它看做一个中枢，本实例中它起到了很关键的作用（这也是为什么我在示例中不愿将它隐藏起来，真正的英雄不应该是幕后的英雄）。 下面的sliders中包含了需要展现的images，这里好像是一个滑动门的效果，通过控制inner的margin-left来展现不同的image。 controls是图片左右两边的切换箭头，先不要着急为什么要设计5个，看上去只要两个就可以了啊，提醒下，我们本例中绝不使用js来实现切换。 最后的active是图片下面的点击小按钮，可以通过点击直接选择要浏览的图片，你也可以丰富里面的结构来设计一个缩略图的效果。 三、css样式表 代码如下: 　　@charset utf-8; /* common */ body{background: #ddd;overflow-x: hidden;} #bd{width: 960px;margin: 100px auto;max-width: 960px;} /