zoukankan      html  css  js  c++  java
  • bootstrap实现Carousel旋转木马(焦点图)

    引入bootstrap相关文件后,在html中写如下代码:

     1 <div class="col-lg-9" >
     2                     <!-- Carousel====================== -->
     3                     <div id="myCarousel" class="carousel slide" data-ride="carousel">
     4                         <!-- Indicators -->
     5                         <ol class="carousel-indicators">
     6                             <li data-target="#myCarousel" data-slide-to="0" class=""></li>
     7                             <li class="active" data-target="#myCarousel" data-slide-to="1"></li>
     8                             <li data-target="#myCarousel" data-slide-to="2"></li>
     9                         </ol>
    10                         <div class="carousel-inner" role="listbox">
    11                             <div class="item">
    12                                 <img
    13                                     src="http://gallery.myweb.com/547fcba0498e14c8d87c366e/547fd098498e14c8d87c369e.jpg"
    14                                     alt="First slide">
    15                                 <div class="container">
    16                                     <div class="carousel-caption">
    17                                     <%--     <h1>Example headline.</h1>
    18                                         <p>
    19                                             Note: If you're viewing this page via a
    20                                             <code>file://</code>
    21                                             URL, the "next" and "previous" Glyphicon buttons on the left
    22                                             and right might not load/display properly due to web browser
    23                                             security rules.
    24                                         </p>
    25                                         <p>
    26                                             <a class="btn btn-lg btn-primary" href="#" role="button">Sign
    27                                                 up today</a>
    28                                         </p> --%>
    29                                     </div>
    30                                 </div>
    31                             </div>
    32                             <div class="item active">
    33                                 <img
    34                                     src="http://gallery.myweb.com/547fd2e3498e14c8d87c374f/547fd2ed498e14c8d87c3750.jpg"
    35                                     alt="Second slide">
    36                                 <div class="container">
    37                                 <!--     <div class="carousel-caption">
    38                                         <h1>Another example headline.</h1>
    39                                         <p>Cras justo odio, dapibus ac facilisis in, egestas eget
    40                                             quam. Donec id elit non mi porta gravida at eget metus.
    41                                             Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    42                                         <p>
    43                                             <a class="btn btn-lg btn-primary" href="#" role="button">Learn
    44                                                 more</a>
    45                                         </p>
    46                                     </div> -->
    47                                 </div>
    48                             </div>
    49                             <div class="item">
    50                                 <img
    51                                     src="http://gallery.myweb.com/547f32a4498e92e126340dfc/547f3839498e92e126340dfd.jpg"
    52                                     alt="Third slide">
    53                                 <div class="container">
    54                                     <div class="carousel-caption">
    55                                         <!-- <h1>希望h1> -->
    56                                         <!-- <p>努力奔跑躲避追赶,而全力奔跑不是为了甩掉包袱,而是守护梦想!</p> -->
    57                                         <!-- <p>
    58                                             <a class="btn btn-lg btn-primary" href="#" role="button">围观</a>
    59                                         </p> -->
    60                                     </div>
    61                                 </div>
    62                             </div>
    63                         </div>
    64                         <a class="left carousel-control" href="#myCarousel" role="button"
    65                             data-slide="prev"> <span
    66                             class="glyphicon glyphicon-chevron-left"></span> <span
    67                             class="sr-only">Previous</span>
    68                         </a> <a class="right carousel-control" href="#myCarousel"
    69                             role="button" data-slide="next"> <span
    70                             class="glyphicon glyphicon-chevron-right"></span> <span
    71                             class="sr-only">Next</span>
    72                         </a>
    73                     </div>
    74                     <!-- /.carousel -->
    75 
    76                 </div>
  • 相关阅读:
    滚轮事件的防冒泡、阻止默认行为的代码(效果是:只让当前div滚动,连当前文档都不滚动的效果)
    js原生封装getClassName()方法-ie不支持getElementsByClassName,所以要自己实现获取类名为className的所有元素
    使用 RequireJS 优化 Web 应用前端
    javascript的页面加载及性能优化(兼容IE7)
    JavaScript中的this陷阱的最全收集--没有之一
    mysql 配置MHA
    mysql 在linux下的完整安装过程
    vue 开发系列(八) 动态表单开发
    vue 开发系列(七) 路由配置
    vue 开发系列(六) 企业微信整合
  • 原文地址:https://www.cnblogs.com/yeqrblog/p/4699661.html
Copyright © 2011-2022 走看看