bootstrap实现图片轮播

来源：互联网发布：linux shell何时加载的编辑：程序博客网时间：2024/04/30 16:37

bootstrap实现图片轮播

Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。
代码如下：

<!DOCTYPE html><html><head><title>标题</title>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <link href="css/style.css" rel="stylesheet">    <link href="css/bootstrap.min.css" rel="stylesheet"></head><body>         <div id="myCarousel" class="carousel slide">              <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>                <li data-target="#myCarousel" data-slide-to="3"> </li>                                </ol>               <div class="carousel-inner">                  <div class="item active" style="background:#223240;">                      <img src="images/001.jpg" alt="第一张" />                  </div>                  <div class="item" style="background:#F5E4DC;">                      <img src="images/004.jpg" alt="第二张" />                  </div>                  <div class="item" style="background:#DE2A2D;">                      <img src="images/003.jpg" alt="第三张" />                  </div>                <div class="item" style="background:#DE2A2D;">                      <img src="images/005.jpg" alt="第四张" />                  </div>                            </div>                        <a href="#myCarousel" data-slide="prev" class="carousel-control left">                  <span class="glyphicon glyphicon-chevron-left"></span>            </a>              <a href="#myCarousel" data-slide="next" class="carousel-control right">                  <span class="glyphicon glyphicon-chevron-right"></span>            </a>          </div>    <script src="js/jquery.min.js"></script>    <!-- 包含了所有编译插件 -->    <script src="js/bootstrap.min.js"></script>    <script type="text/javascript">      $('#myCarousel').carousel({        interval : 4000,//设置轮播时间      });    </script></body></html>

#myCarousel {      margin: 50px 0 0 0;  }  #navbar-collapse ul {      margin-top:0;  }  .carousel-inner img{      margin: 0 auto;  }

html一般把javascript放在后面，避免页面加载缓慢

0 0