1. Python技术站首页
  2. 其他
  3. JavaScript

手机端实现Bootstrap简单图片轮播效果

• JavaScript
yizhihongxing

针对“手机端实现Bootstrap简单图片轮播效果”的攻略，以下是完整的步骤说明：

一、引入Bootstrap库

在实现轮播效果之前，需要引入Bootstrap的库文件，这里以CDN引入的方式为例，将以下代码添加至HTML头部：

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>

引入完成后，可以在页面中使用Bootstrap提供的组件。

二、编写轮播结构

接下来，需要编写一个基本的轮播结构，包括图片容器和轮播指针等元素，可以按照以下示例编写：

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="img/slide-1.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="img/slide-2.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="img/slide-3.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

这里以三张图片为例，需要注意以下几点：

  • id="carouselExampleIndicators"：轮播容器的id，必须唯一；
  • class="carousel slide"：将元素设置为轮播容器，并设置自动轮播，默认使用左右控制箭头；
  • data-ride="carousel"：启用自动轮播；
  • class="carousel-indicators"：轮播指针父容器；
  • data-target="#carouselExampleIndicators"：指定轮播容器；
  • data-slide-to="0"：当前轮播指针的索引，从0开始；
  • class="active"：当前轮播项的状态，必须添加；
  • class="carousel-inner"：轮播项的父容器；
  • class="carousel-item"：每一项的样式；
  • class="carousel-control-prev"和class="carousel-control-next"：左右轮播控制按钮。

三、添加图片和样式

结构编写完成后，需要添加图片和样式，以使轮播生效。这里以添加三张图片为例，在项目中新建一个img文件夹，将图片放置其中，然后在CSS中添加以下样式：

.carousel-item img {
  height: 300px;  /* 图片高度 */
  border-radius: 10px;  /* 圆角 */
}

这里设置了图片高度和圆角样式，可以根据需要自行修改。

四、实现自动轮播和控制

以上步骤完成后，轮播效果已经基本实现，在页面中可以看到三张图片自动轮播。最后，为了方便使用，可以设置手动控制轮播和停止轮播。可以通过以下JS代码实现：

$(document).ready(function () {
  $("#carouselExampleIndicators").carousel();
  $(".carousel").carousel({
    interval: 2000  // 轮播时间
  });
  $("#carouselExampleIndicators").on("mouseenter", function () {
    $(".carousel").carousel("pause");  // 鼠标放上暂停轮播
  });
  $("#carouselExampleIndicators").on("mouseleave", function () {
    $(".carousel").carousel("cycle");  // 鼠标移开继续轮播
  });
});

这里通过jQuery选择器获取到轮播容器，并设置了自动轮播的时间。此外，添加了鼠标移上暂停轮播，鼠标移开继续轮播的事件监听。修改以上代码以达到自己的需求即可。

五、示例说明

示例一

以下是一个简单的轮播效果示例，你可以在CodePen上查看效果。该示例使用了四张图片，其中一张为自定义的404页面图片。通过点击右下角的小白点手动切换图片，鼠标放上暂停轮播。

<div class="container my-4">
  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://picsum.photos/1600/400?random=1" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="https://picsum.photos/1600/400?random=2" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="https://picsum.photos/1600/400?random=3" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="img/404.png" class="d-block w-100" alt="...">
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

.carousel-item img {
  height: 400px;
  border-radius: 10px;
}

$(document).ready(function () {
  $("#carouselExampleIndicators").carousel();
  $(".carousel").carousel({
    interval: 4000
  });
  $("#carouselExampleIndicators").on("mouseenter", function () {
    $(".carousel").carousel("pause");
  });
  $("#carouselExampleIndicators").on("mouseleave", function () {
    $(".carousel").carousel("cycle");
  });
});

示例二

以下是企业推广业务网站使用的轮播效果示例，你可以在CodePen上查看效果。该示例使用了五张图片，鼠标放上暂停轮播。

<div class="container my-4">
  <div id="carouselExampleIndicators" class="carousel fade" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
    </ol>

    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://img.onvshen.com:85/gallery/26459/310794/01.jpg" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>大厅设计</h5>
          <p>大厅空间休闲舒适，彰显着您的品位和气质。</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="https://img.onvshen.com:85/gallery/26459/310794/03.jpg" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>房间设计</h5>
          <p>卧室设计，定制特色实现您的发现之旅</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="https://img.onvshen.com:85/gallery/26459/310794/02.jpg" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>书房设计</h5>
          <p>书房设计，快乐工作、健康生活。</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="https://img.onvshen.com:85/gallery/26459/310794/04.jpg" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>电视墙设计</h5>
          <p>客厅电视墙设计，独到的个性定制。</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="https://img.onvshen.com:85/gallery/26459/310794/05.jpg" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>餐厅设计</h5>
          <p>餐厅设计，品尝生活、品味美食。</p>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

.carousel-item img {
  height: 500px;
  border-radius: 10px;
}
.carousel-item .carousel-caption {
  background: rgba(0, 0, 0, 0.5);
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 50px;
}
.carousel-item .carousel-caption h5 {
  font-size: 2rem;
  color: #fff;
}
.carousel-item .carousel-caption p {
  font-size: 1.2rem;
  color: #fff;
}

$(document).ready(function () {
  $("#carouselExampleIndicators").carousel();
  $(".carousel").carousel({
    interval: 4000
  });
  $("#carouselExampleIndicators").on("mouseenter", function () {
    $(".carousel").carousel("pause");
  });
  $("#carouselExampleIndicators").on("mouseleave", function () {
    $(".carousel").carousel("cycle");
  });
});

以上就是如何实现Bootstrap简单图片轮播效果的详细攻略，包含了步骤说明和两个示例。希望对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：手机端实现Bootstrap简单图片轮播效果 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月1日
下一篇 2023年6月1日

相关文章

  • JavaScript数组Array对象增加和删除元素方法总结

    JavaScript数组Array对象增加和删除元素方法总结 增加元素 push() 方法 可以使用push()方法将元素添加到数组的末尾。 语法： arr.push(item1, item2, …, itemX) 示例： var fruits = ["apple", "banana"]; fruits.push(…

    JavaScript 2023年5月27日
    00

  • 超详细的JavaScript基本语法规则

    超详细的JavaScript基本语法规则 JavaScript的基本组成 JavaScript 由如下组成： 变量（Variables）：用于存储值的容器 运算符（Operators）：用于操作这些值的符号 表达式（Expressions）：用运算符来操作变量和值所组成的结构 语句（Statements）：用于控制程序流程，由表达式组成 函数（Functio…

    JavaScript 2023年5月17日
    00

  • 轻松掌握JavaScript中的Math object数学对象

    轻松掌握JavaScript中的Math Object数学对象 在JavaScript中，Math对象是一个全局对象，提供了许多数学计算相关的方法和属性，使得我们可以轻松完成数学计算并得到期望的结果。本文将介绍Math对象常用的方法和属性，帮助你快速掌握JavaScript中的数学计算。 常用方法 Math.abs() Math.abs() 方法返回一个数的…

    JavaScript 2023年5月28日
    00

  • 从柯里化分析JavaScript重要的高阶函数实例

    从柯里化分析JavaScript重要的高阶函数实例 什么是柯里化 柯里化（Currying）是一种将接收多个参数的函数转换成一系列接收单个参数的函数的技术。 在柯里化中，我们首先声明一个函数并定义它的第一个参数，然后返回一个新的函数，新的函数接受剩余的参数，然后继续返回一个函数，这个过程一直持续到最后一个参数被处理。 多个参数的函数比如add(x, y)，可…

    JavaScript 2023年6月10日
    00

  • js中常见的4种创建对象方式与优缺点

    关于JavaScript中常见的四种创建对象方式和它们的优缺点的详细讲解如下： 一、对象字面量方式 使用对象字面量方式创建对象是JavaScript中最常见、最简单的方式。该方法的语法非常简洁，只需在大括号中定义对象属性和方法即可。 示例代码如下： // 创建一个对象 var obj = { name: "Lucy", age: 20, …

    JavaScript 2023年5月27日
    00

  • js实现自动锁屏功能

    下面我将为你详细讲解如何实现JS自动锁屏功能。 1. 实现原理 实现自动锁屏功能的原理是使用setTimeout函数来设定一个时间，当时间定时完成后，自动执行相应的方法实现锁屏的效果。这个方法可以根据实际需求来设置不同的时间，定时执行不同的操作。 2. 实现步骤 具体实现自动锁屏功能的步骤如下： 1. 首先，在HTML中创建需要锁屏的页面 你需要在HTML中…

    JavaScript 2023年6月11日
    00

  • JS实现提示效果弹出及延迟隐藏的功能

    JS实现提示效果的弹出及延迟隐藏功能，可以通过以下步骤来完成： 步骤一：创建提示框HTML结构 首先，我们需要创建一个提示框的HTML结构，可以使用div标签模拟弹出框，也可以使用ul或者table标签，此处以使用div标签为例。 <div id="tip-box" style="display:none;"&g…

    JavaScript 2023年6月11日
    00

  • js中过滤特殊字符的正则表达式

    接下来我将详细讲解“js中过滤特殊字符的正则表达式”的攻略。 正则表达式 正则表达式是一种模式匹配的工具，它可以用来匹配并提取文本中的特定字符或字符串。在JavaScript中，可以使用正则表达式来过滤特殊字符。 过滤特殊字符 过滤特殊字符可以提高网站或应用程序的安全性和稳定性，防止恶意代码注入或造成页面渲染异常等问题。 在JavaScript中，可以使用正…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部