[代码收集]纯CSS3幻灯片实现的很酷的图文切换效果(单选按钮radio) - 笑忘书网页代码收藏馆

首页-代码 2013-12-14 07:49:35 -0500

★纯CSS3幻灯片实现的很酷的图文切换效果★

请勿抄袭本页面

代码说明

今天为大家展示的纯html/css的幻灯片，无jQuery代码就可以实现流畅的切换效果，而且很酷很漂亮。这个CSS3幻灯片使用了单选按钮radio来实现图片的切换。转自设计达人，@笑忘书作了些适配手机页面的修改

使用方法及注意事项使用前请先阅读本内容

修改图片链接和对应文本即可

html代码

<li>
        <input type="radio" name="btn" value="one" checked="checked">
        <label for="btn"></label>
        <figure>
          <img src="http://35230.wodemo.com/entry/175130/9c18efc5a23b25b0d459ba53e24c5943/10318440.jpg">
          <figcaption>
            <h4>Fabio Basile</h4>
              <nav role="navigation">
                <p>iPhone 6 Infinity</p>
                <ul>
                  <li><a href="#" class="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>
         <figure class="entypo-forward">
          <img src="http://35230.wodemo.com/entry/175130/5aa00605eafb43eae22bcae225f305c8/3995471.jpg">
          <figcaption>
            <h4>Brian Miller</h4>
              <nav role="navigation">
                <p>TypeTi.me</p>
                <ul>
                  <li><a href="#" class="entypo-dribbble"></a></li>
                  <li><a href="/" class="entypo-twitter"></a></li>
                </ul>
              </nav>  
          </figcaption>
        </figure>
      </li>

<li>
        <input type="radio" name="btn" value="three">
        <label for="btn"></label>
        <figure class="entypo-forward">
          <img src="http://35230.wodemo.com/entry/175130/6d3428077c2cb1d7898479050cdec0ea/4288757.jpg">
          <figcaption>
            <h4>Nicolas Quod</h4>
              <nav role="navigation">
                <p>Iphone 6 - Notification - iOS 7</p>
                <ul>
                  <li><a href="#" class="entypo-dribbble"></a></li>
                  <li><a href="/" class="entypo-twitter"></a></li>
                </ul>
              </nav>  
          </figcaption>
        </figure>
      </li>

<li>
        <input type="radio" name="btn" value="four">
        <label for="btn"></label>
         <figure class="entypo-forward">
          <img src="http://35230.wodemo.com/entry/175130/d45c29e43d89d2258069b11462c45453/5950080.jpg">
          <figcaption>
            <h4>Joffrey</h4>
              <nav role="navigation">
                <p>▽</p>
                <ul>
                  <li><a href="#" class="entypo-dribbble"></a></li>
                  <li><a href="/" class="entypo-twitter"></a></li>
                </ul>
              </nav>  
          </figcaption>
        </figure>
      </li>

<li>
        <input type="radio" name="btn" value="five">
        <label for="btn"></label>
         <figure class="entypo-forward">
          <img src="http://35230.wodemo.com/entry/175130/a9f9eba8d7845c1b8b7a136342f33f1d/8224110.jpg">
          <figcaption>
            <h4>Jared Long</h4>
              <nav role="navigation">
                <p>Don't drop your iPhone Infinity</p>
                <ul>
                  <li><a href="#" class="entypo-dribbble"></a></li>
                  <li><a href="/" class="entypo-behance"></a></li>
                </ul>
              </nav>  
          </figcaption>
        </figure>
      </li>

<li>
        <input type="radio" name="btn" value="six">
        <label for="btn"></label>
         <figure class="entypo-forward">
          <img src="http://35230.wodemo.com/entry/175130/cde543b54db395841ae0e19a52b49a27/8844235.jpg">
          <figcaption>
            <h4>Charles Treece</h4>
              <nav role="navigation">
                <p>iPhone 6 Infinity Side Status Bar</p>
                <ul>
                  <li><a href="#" class="entypo-dribbble"></a></li>
                  <li><a href="/" class="entypo-twitter"></a></li>
                </ul>
              </nav>  
          </figcaption>
        </figure>
      </li>

</ul>
  </nav>
</div>

代码收集

Fabio Basile
iPhone 6 Infinity
Brian Miller
TypeTi.me
Nicolas Quod
Iphone 6 - Notification - iOS 7
Joffrey
▽
Jared Long
Don't drop your iPhone Infinity
Charles Treece
iPhone 6 Infinity Side Status Bar

点击上面的圆点进行切换

[代码仅供参考，转载请注明出处]

----Comments(2)----
21克的爱情 (@jxdm) | @ at 2015-11-30 05:56:
忘书大哥怎么自动切换

笑忘书 (@35230) | @ at 2013-12-14 08:29:
要玩命加载几张图片…

Subscribe | Register | Login | N