BootStrap实现一个轮播图_js引入bootstrap写一个轮播图-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_34500944/article/details/102774848

本文详细介绍了如何使用BootStrap构建一个轮播图，包括引入基本开发文档，设置轮播图片、左右箭头和轮播指示器，以及调整样式实现动态切换效果。并提到若要改变轮播图切换速度，需要额外修改DOM。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用BootStrap实现轮播图

一、引入需要的boot基本开发文档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>
    <title>Title</title>
</head>
<body>
<div class="container">
     
</div>
</body>
</html>

轮播图可分为三部分：1、轮播的图片 2、左右箭头 3、轮播指示器之后在外面需要套一个 div class=“carousel” 设置事件data-ride=“carousel” ，id为demo，为后面的轮播左右箭头和轮播指示器添加一个id=“demo”

<div class="container">
    <div class="carousel" data-ride="carousel" id="demo">
      <!--轮播图片-->
      <!--左右箭头-->
      <!--轮播指示器-->
    </div>
</div>

看看这个class="carousel"里面设置什么，如下：相对定位，给内部子元素定位以参照

.carousel {
  position: relative;
}

然后来设置轮播图片：
一个div里面嵌套四个小div都包含img元素，引入图片

<div class="carousel-inner">
            <div class="carousel-item active">
                <img src="../img/uni1.jpg" alt="">
            </div> 
            <div class="carousel-item">
                <img src="../img/uni2.jpg" alt="">
            </div>
            <div class="carousel-item">
                <img src="../img/uni3.jpg" alt="">
            </div>
            <div class="carousel-item">
                <img src="../img/uni4.jpg" alt="">
            </div>
</div>

其中看看class="carousel-inner"中写了什么：
还是相对定位，但是verflow:hidden把溢出的图片隐藏起来了，只去显示一张图片

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

看一下class="carousel-item"中写了什么：

.carousel-item {
  position: relative;
  display: none;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  transition: -webkit-transform 0.6s ease;
  transition: transform 0.6s ease;
  transition: transform 0.6s ease, -webkit-transform 0.6s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

其中有一个display:none，隐藏了图片，四个都这样设置，都会隐藏，所以在第一个class中添加一个active,配合carousel-item将其显示出来

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block;
}

设置左右箭头
其中添加事件data-slide=prev和data-slide=next

 <a href="#" class="carousel-control-prev" data-slide="prev"><span class="carousel-control-prev-icon"></span></a>
 <a href="#" class="carousel-control-next" data-slide="next"><span class="carousel-control-next-icon"></span></a>

到这一步，可以看一下效果：
左右箭头已经出现，位置可以自己后面重写一下
在这里插入图片描述

设置轮播指示器
其中事件是data-slide-to="…" 目标是data-target="#demo"; 同样需要将第一个对应的设置为 class=“active”

<ul class="carousel-indicators">
            <li data-slide-to="0" data-target="#demo" class="active"></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>

看一下.carousel-indicators中写了什么:

绝对定位，弹性，

.carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 10px;
  left: 0;
  z-index: 15;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding-left: 0;
  margin-right: 15%;
  margin-left: 15%;
  list-style: none;
}

看一下.carousel-indicators li,给每个li规定了大小，左右外边距

.carousel-indicators li {
  position: relative;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  width: 30px;
  height: 3px;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  background-color: rgba(255, 255, 255, 0.5);
}

这个时候已经把轮播指示器写出来了，四个小条，下面重写微调一下左右箭头和轮播指示器,微调一下左右箭头和轮播指示器的形状、位置、圆角和大小：

<style>
        .carousel-control-prev,
        .carousel-control-next {
            width: 5%;
            height: 20%;
            background: rgba(0,0,0,0.3);
            top: 40%;
            border-radius: 0.2rem;
        }
        .carousel-control-prev{
            left: 0.2rem;
        }
        .carousel-control-next{
            right: 0.2rem;
        }
        .carousel-indicators li{
            width: 10px;
            height: 10px;
            border-radius: 50%;
        }
        .carousel-indicators .active{
            background: #00ccff;
        }
</style>