Bootstrap 轮播图（Carousel）插件

最新推荐文章于 2023-02-08 22:47:13 发布

banbi5215

最新推荐文章于 2023-02-08 22:47:13 发布

阅读量112

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/thankyouGod/p/6367112.html

版权

<!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>

转载于:https://www.cnblogs.com/thankyouGod/p/6367112.html

banbi5215

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap 轮播图（Carousel）插件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>demo</title> <link rel="icon" type="image/x-icon" href="../img/favicon.ic...
复制链接

扫一扫