轮播图

最新推荐文章于 2024-04-18 20:01:15 发布

weixin_45807545

最新推荐文章于 2024-04-18 20:01:15 发布

阅读量191

点赞数 1

文章标签： bootstrap

本文链接：https://blog.csdn.net/weixin_45807545/article/details/103687737

版权

编辑器：WebStorm

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<meta name="viewport"
      content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" href="../css/bootstrap.css">
<script src="../js/jquery.min.js"></script>
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<style>
  /*重写boot的样式，将轮播指示图小横条改为圆圈（修改是指示器宽高与背景颜色）*/
  .carousel-indicators li{
      width: 12px;height: 12px;
      margin: 5px;
      border-radius: 50%;
      background-color:#fff;
    }
  /*指示器被选中状态背景颜色修改*/
  .carousel-indicators .active{
      background-color: #0aa1ed;
    }
   /*修改左右箭头的尺寸和背景色*/
   .carousel-control-prev,
   .carousel-control-next{
      width: 4%;height:16%;
      border-radius: 5px;
      top: 42%;
      background-color:rgba(0,0,0,0.3);
   }
   .carousel-control-prev{left: 4px;}
   .carousel-control-next{right: 4px;}

</style>
</head>

<div class="container">
  <h3>轮播图</h3>
<!--轮播图外包裹，carousel，要想让图动起来，需要data-ride，设置动的方式，carousel-->
  <div id="demo" class="carousel" data-ride="carousel">
<!--1.轮播图片-->
<!--所有的轮播图片，统一放在carousel-inner中-->
    <div class="carousel-inner">
<!--每一张图片，单独放在一个carousel-item中，carousel-item设置了display：none-->
<!-- carousel-item.active设置了display：block-->
      <div class="carousel-item active">
        <img src="../index/banner1.png" alt="">
      </div>
      <div class="carousel-item">
        <img src="../index/banner2.png" alt="">
      </div>
      <div class="carousel-item">
        <img src="../index/banner3.png" alt="">
      </div>
      <div class="carousel-item">
        <img src="../index/banner4.png" alt="">
      </div>
    </div>
<!--2.轮播指示器-->
<!--carousel-indicators绝对定位，水平居中对齐，弹性布局横向显示-->
    <ul class="carousel-indicators">
<!--carousel-indicators.active背景变为白色-->
<!--事件data-slide-to=“0”点击滑动到第0张图片-->
<!--data-target="#demo"点击后修改的轮播图是#demo这个轮播-->
      <li class="active" data-slide-to="0"
          data-target="#demo"></li>
      <li data-slide-to="1"data-target="#demo"></li>
      <li data-slide-to="2"data-target="#demo"></li>
      <li data-slide-to="3"data-target="#demo"></li>
    </ul>
<!--3.左右箭头-->
<a href="#demo" data-slide="prev" class="carousel-control-prev">
   <span class="carousel-control-prev-icon"></span>        </a>
<a href="#demo" data-slide="next" class="carousel-control-next">
   <span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</body>
</html>