基于HTML5鼠标点击淡入淡出切换代码

时间：2016-03-09
　　基于HTML5鼠标点击淡入淡出切换代码。这是一款基于jQuery+HTML5实现的淡入淡出切换全屏幻灯片代码。效果图如下：

3.jpg
在线预览       源码下载
　　实现的代码

　　html代码：
  1. <header id="immortal_header">
  2.        <div id="immortal_carousel" class="carousel thumbnail_text_carousel_fade thumbnail_text_carousel_wrapper" data-ride="carousel" data-interval="6000" data-pause="hover">
  3.            <ol class="carousel-indicators thumbnail_text_carousel_indicators">

  5.                <li data-target="#immortal_carousel" data-slide-to="0" class="active">
  6.                    <h5>爱编程</h5>
  7.                    <p>www.w2bc.com</p>
  8.                </li>

  10.                <li data-target="#immortal_carousel" data-slide-to="1">
  11.                    <h5>爱编程</h5>
  12.                    <p>www.w2bc.com</p>
  13.                </li>

  15.                <li data-target="#immortal_carousel" data-slide-to="2">
  16.                    <h5>爱编程</h5>
  17.                    <p>www.w2bc.com</p>
  18.                </li>

  20.                <li data-target="#immortal_carousel" data-slide-to="3">
  21.                    <h5>爱编程</h5>
  22.                    <p>www.w2bc.com</p>
  23.                </li>

  25.                <li data-target="#immortal_carousel" data-slide-to="4">
  26.                    <h5>爱编程</h5>
  27.                    <p>www.w2bc.com</p>
  28.                </li>
  29.            </ol>
  30.            <div class="carousel-inner" role="listbox">
  31.                <div class="item active">
  32.                    <a href="#">
  33.                        <img src="images/slider_02.jpg" alt="slider 02" />
  34.                    </a>
  35.                </div>
  36.                <div class="item">
  37.                    <a href="#">
  38.                        <img src="images/slider_04.jpg" alt="slider 04" />
  39.                    </a>
  40.                </div>

  42.                <div class="item">
  43.                    <a href="#">
  44.                        <img src="images/slider_05.jpg" alt="slider 05" />
  45.                    </a>
  46.                </div>

  48.                <div class="item">
  49.                    <a href="#">
  50.                        <img src="images/slider_06.jpg" alt="slider 06" />
  51.                    </a>
  52.                </div>

  54.                <div class="item">
  55.                    <a href="#">
  56.                        <img src="images/slider_03.jpg" alt="slider 03" />
  57.                    </a>
  58.                </div>
  59.            </div>
  60.    </header>
复制代码

　　via：http://www.w2bc.com/article/html5-fadein-focus-fadeout
上一篇：HTML5 SVG响应式路径过渡动画幻灯片特效 下一篇：HTML5炫酷扑 克 牌卡片动画类库

相关文章

最新文章

Copyright © 2022-2023 HTML5模板网 版权所有并保留所有权