首页 > 代码库 > Bootstrap 轮播图（Carousel）插件

Bootstrap 轮播图（Carousel）插件

2024-09-03 02:28:23   221人阅读

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo</title>
  <link rel="icon" type="image/x-icon" href="../img/favicon.ico"/>
  <script type="text/javascript" src="../js/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="../plus/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
  <script type="text/javascript" src="../plus/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

  <style>
    #myCarousel{
      width: 790px;
      margin: auto;
    }
  </style>
</head>
<body>
    

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- 轮播（Carousel）指标 -->
  <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>   
  <!-- 轮播（Carousel）项目 -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="../img/b1.jpg" alt="First slide">
    </div>
    <div class="item">
      <img src="../img/b2.jpg" alt="Second slide">
    </div>
    <div class="item">
      <img src="../img/b3.jpg" alt="Third slide">
    </div>
  </div>
  <!-- 轮播（Carousel）导航 -->
  <a class="carousel-control left" href="#myCarousel" 
     data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" 
     data-slide="next">&rsaquo;</a>
</div> 

</body>
</html>

 

Bootstrap 轮播图（Carousel）插件


联系
我们