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

提到slider过去一直都是用来合实现相关的切换效果。听过大家一直讨论使用html5+css3的现方式，自己却一直没有动手实现过。好吧，这次我有时间来玩下了感兴趣的朋友可以了解下开始进入正题，提到，过去一直都是用来合实现相关的切换效果。听过大家一直讨论使用html5+css3的现方式，自己却直没有动手实现过。好吧，这次我有时间来玩下css3了。其实，我也是被微博上的一条消息给吸引过来的，看到别人实现的效果很赞，然后自己就有了动手做一把的冲动。一、效果图跟过去用js来实现的效果看上去差不了太多，但是整体感觉很优雅。好吧的强大之处在于我写了很少的代码实现了比较复杂的效果但是这个示例也有不太完美的地方，就是在两张图片切换的时候，如果中间间隔有图片，那么在动的执行过程中还是会看到，比较不给力。不过想想，这可是纯来现的效果啊，用来现的复杂的html结变动在这里可看不到，所以上面的效果很难简单用css3来现。二、结构代码如:<divid="bd">type="radio"id="slider1">type="radio"id="slider2">type="radio"id="slider3">type="radio"id="slider4">type="radio"id="slider5"><divid="sliders"><divid="overflow"><divclass="inner"><article><divclass="info"><ahref="#">Description1</a></div>src="img/pic1.png"/></article><article><divclass="info"><ahref="#">Description2</a></div>src="img/pic2.png"/></article><article><divclass="info"><ahref="#">Description3</a>

</div>src="img/pic3.png"/></article><article><divclass="info"><ahref="#">Description4</a></div>src="img/pic4.png"/></article><article><divclass="info"><ahref="#">Description5</a></div>src="img/pic5.png"/></article></div></div></div><div<labelfor="slider1"></label><labelfor="slider2"></label><labelfor="slider3"></label><labelfor="slider4"></label><labelfor="slider5"></label></div><divid="active"><labelfor="slider1"></label><labelfor="slider2"></label><labelfor="slider3"></label><labelfor="slider4"></label><labelfor="slider5"></label></div></div>上面的代码是主要的html结，其中包含了一个，你可以在这里它看做一个中枢，本实例中它起到了很关键的作用（这也是为什么我在示例中不愿将它隐藏起来，真正的英雄不应该是幕后的英雄下面的中含了需要展现的images，这里好像是一个滑动门的效果，通过控制inner的来现不同的。controls是片左右两边的切箭头，先不要着急为什么要设计5个看上去只要两个就可以了啊，提醒下，我们本例中绝不使用js来实现切换。最后的是图片下面的点击小按钮以通过点击直接选择要浏览的图片也可以丰富里面的结构来设计一个缩略图的效果。

三、css样式表代码如:utf-8;/**/body{background:#ddd;overflow-x:hidden;}960px;margin:960px;}/**/border-radius:5px;box-shadow:1px4px#fff;}#overflow{width:overflow:hidden;}.inner{width:all1s-webkit-transition:all1s}left;width:20%;}.info{position:font-family:ease-out;-webkit-transition:opacityease-out;}.infoh1{font-size:22px;font-weight:bold;0}.infoa{text-decoration:

}/**/width:margin-top:}label{display:width:pointer;}}/*active*/#active{width:margin-top:text-align:center;}label{display:inline-block;width:border-radius:5px;border-color:#777;}label:hover{}/*inputstyle*/~#activelabel:nth-child(1),~#activelabel:nth-child(2),~#activelabel:nth-child(3),~#activelabel:nth-child(4),~#activelabel:nth-child(5){}~label:nth-child(5),~label:nth-child(1),

~label:nth-child(2),~label:nth-child(3),~label:nth-child(4){display:left;url(../img/prev.png)-70px;}~label:nth-child(2),~label:nth-child(3),~label:nth-child(4),~label:nth-child(5),~label:nth-child(1){display:right;no-repeat;margin-right:-70px;}~article:nth-child(1).info,~article:nth-child(2).info,~article:nth-child(3).info,~article:nth-child(4).info,~article:nth-child(5)allease-out1s;-webkit-transition:all1s;}~.inner{0;}~.inner{}~.inner{}~.inner{}~.inner{}好吧我承认上面的css码真的比较多较复杂是真的实现了常炫的效果，而且我写完的时候也被的大魔力折服了。

这里面前半部分的代码主要用来设计的构，包括一些圆角、阴影方面的美化设计半分主要是一些动画效实现一些切换图片或者是控制按钮切换时候的动态效果。但是，最主要的是最下面的选择器的使用，通过它真正实现了图片切换的功。我真的认为选择器在示例里起到了非常非常重要的作用，因为这是我过去学习所略的知识。一直觉得强大的是圆角、阴影，是变形、动画，但是这段代码真的告诉我们选择器在中有多么重要。在一些复杂的辑中，使用这些css3择器可以实现令人无法想象的效果。四、现的原理第一次看完上面的代码的时候跟我当初一样信这样的代码可以实现slider的效果。好吧，我来分析下实现的原理吧。我在上文中说过，最上面的那个radio组重要，是实的枢纽。没错，它真的是。要实现一个slider，无非要实现两种切换，就是点击控制钮的时候，图片切换；同时，图片切换的时候，保证所有的控制按钮正确显示。本例中我们使用来作为控制按钮article包含图片，而inner作图片的容器简单的想，和article怎么也建立不起来联系的态信息很难反映到article的选择上去。除非有个东西可以把label的切换状态记录下来，然后通过某种手段来选择应次序的图片来显示。好吧，现在，你明白了为什么那个radio组实现的键了吧。对，它的出现就是为了记录的击态。我们通过labelfor性将它与对应的对应起来，当label点的时候，相应的radio就为了checked的态然后通过强大的择器将inner向移动让应的图片显示出来。当然应的左右选择按钮也是通过选择器来显示的。同样的道理右钮点击时，下方个选择按钮的状态也是这样实现的。上面的实现原理比较简单吧实只要可以记录下控制按钮的点击状态过择器就可以实现的果。不仅仅只