radio切换控制div显示_非常迷你的纯CSS3时间轴切换焦点图

点击上方[网页设计自学平台]→右上角[...]→[设为星标⭐]

这是一款基于jQuery的和CSS3的焦点图动画插件，插件非常迷你，功能也比较简单，它的特点是图片切换按钮类似一条时间轴，点击时间轴的圆圈即可切换到相应的图片。点击切换按钮时，按钮会出现渐隐渐显的发光特效，图片切换过程中整张图片过渡的效果非常柔和，并且图片描述也相应以动画的方式显示在图片上，是一款非常棒的CSS3图片切换组件。

HTML代码：

< div  id = “gal” >

  < nav  class = “galnav” >

   < ul >

                 < li > < input  type = “radio”  name = “btn”  value = “one”  checked = “checked” />

                 < label  for = “btn” > label >

       < figure >

         < img  src = “images / 01_Fabio_Basile.jpg“ />

            < H4 >的Fabio巴西莱 H4 >

              < NAV  角色 = '导航' >

                < p > iPhone 6无限 p >

                 < UL >

                          < 李 > < 一个HREF = “＃”  类 = “entypo-dribbble” >

                          a > li >

                          < li > < a  href = “＃”class =“entypo-twitter” > a >

                          li >

                 ul >

              nav >   

          figcaption>

        figure >

         li >

                 < li > < input  type = “radio”  name = “btn”  value = “two” />  < label  for = “btn” >

                 label >

        

class = “entypo-forward” >

         < img  src = “images / 08_Brian_Miller.jpg” />

         < figcaption>

            < h4 > Brian Miller h4 >

              < nav  role = 'navigation' >

                < p > TypeTi.me p >

                 < ul >

                          < li > < a  href = “＃”  class = “entypo-dribbble” > a >

                          li >

                          < li >< 一个HREF = “＃”  类 = “entypo-叽叽喳喳” > 一 >

                          李 >

                 UL >

              NAV >   

          figcaption>

        数字 >

         李 >

                 < 李 > < 输入类型 = “radio”  name = “btn”  value = “three” />  < label  for = “btn”>

                 label >

       < figure  class = “entypo-forward” >

         < img  src = “images / 05_Nicolas_Quod.jpg” />

         < figcaption>

            < h4 > Nicolas Quod h4 >

              < nav  role = 'navigation' >

                < p > Iphone 6 - 通知-  iOS 7 p >

                 < ul >

                          < li >

                          < a  href = “＃”class = “entypo-dribbble” >

                          一 > 李 >

                          < 李 >

                          < 一个HREF = “＃”  类 = “entypo-叽叽喳喳” >

                          一 > 李 >

                 U