Bootstrap实战--轮播图

最新推荐文章于 2021-12-25 02:20:00 发布

原创最新推荐文章于 2021-12-25 02:20:00 发布 · 465 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

bootstrap 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何使用HTML和JavaScript构建轮播图，包括进度指示器、传送带项及控件的具体实现方式，并提供了调整轮播时间的方法。

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

搭建

进度指示器

<div id="homepage-feature" class="carousel slide " data-ride="carousel">
    <!-- 轮播（Carousel）指标 -->
    <ol class="carousel-indicators">
        <li data-target="#homepage-feature" data-slide-to="0" class="active"></li>
        <li data-target="#homepage-feature" data-slide-to="1"></li>
        <li data-target="#homepage-feature" data-slide-to="2"></li>
        <li data-target="#homepage-feature" data-slide-to="3"></li>
    </ol>

解析：
整个传送带是一个ID属性id="homepage-feature" 的div标签，其中carousel类用于把传送带CSS应用到这个元素，为指示器、传送带项和前一张以及后一张空间添加样式。

进度指示器的data-target必须使用传送带的ID属性，这里是id="homepage-feature。有了这个属性，JavaScript插件才能为活动的传送带项添加active类。之后类的切换就交给JavaScript控制，它会删除第一个指示器的这个类，再添加到后续指示器，如此循环。

data-slide-to像编程语言一样从0开始。

传送带项

<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
    <div class="item active">
        <img src="img/okwu.jpg" alt="OKWU.edu Homepage">
    </div>
    <div class="item">
        <img src="img/okwu-athletics.jpg" alt="OKWU Athletics Homepage">
    </div>
    <div class="item">
        <img src="img/bartlesvillecf.jpg" alt="Bartlesville Community Foundation">
    </div>
    <div class="item">
        <img src="img/emancipation.jpg" alt="Emancipation Stories">
    </div>
</div>

每个传送带后面，是类carousel-inner的元素。元素是所有传送带的项（item），就是图片。

传送带控件

<!-- 轮播（Carousel）导航 -->
  <a class="left carousel-control" href="#homepage-feature" role="button" data-slide="prev">
    <span class="icon fa fa-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#homepage-feature" role="button" data-slide="next">
    <span class="icon fa fa-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

用于在传送带两侧显示前一个、后一个按钮，对应着Glyphicon字体图标。

轮播时间的调整

通过修改js/main.js

添加以下代码：

$(document).ready(function(){
    $('.carousel').carousel({
        interval:8000
    });
});

可将轮播时间调整为8秒。