• 基于bootstrup3全屏宽度的响应式jQuery幻灯片特效


    这是一款效果非常酷的基于Bootstrup3.x和HTML5的响应式全屏宽度jQuery幻灯片特效。该幻灯片能自适应屏幕的宽度,使用HTML5的data属性来指定幻灯片所需的各种属性。使用简单,界面美观大方。效果图如下:

    在线预览    源码下载

    实现的代码。

    html代码:

    <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="item active">
                    <img src="img/1.jpg" style=" 100%" data-src=" " alt="First slide">
                    <div class="container">
                        <div class="carousel-caption">
                            <h1>
                                Example headline.</h1>
                            <p>
                                Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi
                                porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                            <p>
                                <a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img src="img/2.jpg" style=" 100%" data-src="" alt="Second slide">
                    <div class="container">
                        <div class="carousel-caption">
                            <h1>
                                Another example headline.</h1>
                            <p>
                                Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi
                                porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                            <p>
                                <a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img src="img/3.jpg" style=" 100%" data-src="" alt="Third slide">
                    <div class="container">
                        <div class="carousel-caption">
                            <h1>
                                One more for good measure.</h1>
                            <p>
                                Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi
                                porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                            <p>
                                <a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
                        </div>
                    </div>
                </div>
            </div>
            <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left">
            </span></a><a class="right carousel-control" href="#myCarousel" data-slide="next"><span
                class="glyphicon glyphicon-chevron-right"></span></a>
        </div>

    via:http://www.w2bc.com/Article/39088

  • 相关阅读:
    SQL SERVER 慢查询检查语句
    Bootstrap Table表头多一行
    继承方法给页面加上Session判断的小例子
    TreeView隐藏指定节点的CheckBox
    再次解决 尝试加载 Oracle 客户端库时引发 BadImageFormatException
    ASP.NET的路由系统:根据路由规则生成URL【转】
    ASP.NET的路由系统:路由映射 【转】
    ASP.NET的路由系统:URL与物理文件的分离【转】
    pycham中使用mysqldb(python2.7)
    Pyhton配置CGI
  • 原文地址:https://www.cnblogs.com/liaohuolin/p/4518859.html
Copyright © 2020-2023  润新知