BootStrap 实现轮播图

斐波娜娜

于 2024-01-15 19:39:34 发布

阅读量1.9k

点赞数 9

分类专栏： JavaScript学习文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/christmassss/article/details/135608791

版权

JavaScript学习专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在HTML项目中使用Bootstrap库来实现轮播图功能，包括下载Bootstrap文件、引入相关CSS和JS文件，以及编写代码示例。

摘要由CSDN通过智能技术生成

Bootstrap中文网

1、下载BootStrap

2、引入相关文件

在下载好的文件夹中找到下面的文件，复制到自己的项目中并引入

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />

<script src="bootstrap/js/jquery.min.js"></script>

<script src="bootstrap/js/bootstrap.min.js"></script>

3、查看bootstrap中实现轮播图的插件

Carousel就是轮播图的效果：

复制下面的代码到我们的html页面中

 <!-- 轮播图模块 -->
    <div class="focus">
        <!-- 下面的是复制的 -->
      <div
        id="carousel-example-generic"
        class="carousel slide"
        data-ride="carousel"
      >
        <!-- Indicators 就是小圆点-->
        <ol class="carousel-indicators">
          <li
            data-target="#carousel-example-generic"
            data-slide-to="0"
            class="active"
          ></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides  轮播图主体部分 -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="..." alt="..." />
            <div class="carousel-caption">...</div>
          </div>
          <div class="item">
            <img src="..." alt="..." />
            <div class="carousel-caption">...</div>
          </div>
          ...
        </div>

        <!-- Controls 控制按钮-->
        <a
          class="left carousel-control"
          href="#carousel-example-generic"
          role="button"
          data-slide="prev"
        >
          <span
            class="glyphicon glyphicon-chevron-left"
            aria-hidden="true"
          ></span>
          <span class="sr-only">Previous</span>
        </a>
        <a
          class="right carousel-control"
          href="#carousel-example-generic"
          role="button"
          data-slide="next"
        >
          <span
            class="glyphicon glyphicon-chevron-right"
            aria-hidden="true"
          ></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>

添加自己的图片，就可以实现轮播图了。