码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap实现轮播图

时间:2020-06-09 14:25:12      阅读:56      评论:0      收藏:0      [点我收藏+]

标签:phi   轮播图   大小   添加   script   data   asc   query   style   

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="../css/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.css"/>
  <script src="../css/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="../css/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
 <style type="text/css">
  /*设置轮播图大小*/
  div{
   width: 400px;
   height: 180px;
  }
 </style>
 </head>
 <body>
  <!--1.轮播图的圆圈部分-->
  <!--data-ride = "carousel"自动播放,悬停效果      data-interval=‘2000‘设置播放的秒数-->
  <div class="carousel solide" id="box" data-ride = "carousel" data-interval=‘2000‘>
   <ol class="carousel-indicators">
    <li data-target = "#box" data-slide-to = "0" class="active"></li>
    <li data-target = "#box" data-slide-to = "1"></li>
    <li data-target = "#box" data-slide-to = "2"></li>
   </ol>
   <!--2.轮播图的幻灯片-->
   <div class="carousel-inner">
    <div class="item active">
     <img src="../img/批注 2020-06-05 101646.jpg"/>
     <div class="carousel-caption"><!--为图片添加文字说明-->
      <h4>图一</h4>
     </div>
    </div>
    <div class="item">
     <img src="../img/批注 2020-06-05 101707.jpg"/>
     <div class="carousel-caption">
      <h4>图二</h4>
     </div>
    </div>
    <div class="item">
     <img src="../img/批注 2020-06-05 101611.jpg"/>
     <div class="carousel-caption">
      <h4>图三</h4>
     </div>
    </div>
   </div>
   <!--3.轮播图左右按钮-->
   <a href="#box" class="left carousel-control" data-slide = "prev" >
    <span class="glyphicon glyphicon-chevron-left"></span>
   </a>
   <a href="#box" class="right carousel-control" data-slide = "next" >
    <span class="glyphicon glyphicon-chevron-right"></span>
   </a>
  </div>
 </body>
</html>

bootstrap实现轮播图

标签:phi   轮播图   大小   添加   script   data   asc   query   style   

原文地址:https://www.cnblogs.com/qq1561942060/p/13072320.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!