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

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

• JavaScript

针对“手机端实现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日

相关文章

  • JS字符串统计操作示例【遍历,截取,输出,计算】

    为了更好地讲解 “JS字符串统计操作示例【遍历,截取,输出,计算】”，我们首先需要了解什么是字符串以及JavaScript中的字符串操作函数。 1. 什么是字符串？ 字符串就是一系列字符的集合，例如”Hello World!”就是一个字符串。在JavaScript中，字符串可以用单引号、双引号或被反斜杠包括起来。 例如： var str = ‘Hello W…

    JavaScript 2023年5月28日
    00

  • ES6如何将 Set 转化为数组示例详解

    当需要将ES6 Set类型转化成数组进行处理时，我们可以使用一些内置的方法来完成这个过程。 使用Array.from()方法 const mySet = new Set(["hello", "world"]); const myArr = Array.from(mySet); console.log(myArr); 在…

    JavaScript 2023年5月27日
    00

  • 如何在TypeScript中处理日期字符串

    当我们在TypeScript中处理日期字符串时，需要使用到JavaScript内置的Date对象和相关操作方法。下面给出了常用的几种操作方法。 1. 将日期字符串转为Date对象 可以通过以下方法将一个符合日期格式的字符串转为Date对象： const dateString = ‘2021-05-20’; const date = new Date(date…

    JavaScript 2023年6月1日
    00

  • JS中常用的输出方式(五种)

    当我们在编写JavaScript代码时，需要将程序运行的结果在控制台或者网页上输出，此时就需要使用JavaScript提供的输出函数。JS中常用的输出方式有以下五种： 1. alert() 语法：alert(要输出的内容); 作用：在页面上弹出一个消息框，并在里面输出指定的内容。 示例： alert("您的操作有误，请重新输入！"); /…

    JavaScript 2023年5月28日
    00

  • JavaScript中valueOf函数与toString方法深入理解

    JavaScript中valueOf函数与toString方法深入理解 JavaScript中的对象可以通过自身的函数或方法转换为原始值。其中，valueOf函数和toString方法都可以用来实现此目的。本文将深入探讨valueOf函数与toString方法的区别、使用场景、如何自定义和优先级等问题，并通过示例说明它们的使用方法。 区别 valueOf v…

    JavaScript 2023年5月27日
    00

  • 详细总结Javascript中的焦点管理

    详细总结Javascript中的焦点管理 焦点管理是指在web页面中，控制用户当前所在的元素以及元素的状态。Javascript是一门用于编写动态页面的高级脚本语言，在web开发中，通常需要用Javascript来实现焦点的管理。 HTML的焦点管理 HTML元素可以通过设置tabindex属性来定义在页面中的tab顺序，从而控制元素的焦点。在HTML中，焦…

    JavaScript 2023年6月10日
    00

  • js跳转页面方法总结

    JS跳转页面方法总结 在Web开发中，JS跳转页面是非常常见的操作。下面我们来总结几种JS跳转页面的方法。 方法一：使用JavaScript中的location对象 可以通过JavaScript提供的location对象来实现跳转页面的功能。使用方法如下： // 跳转到指定URL location.href = "http://www.exampl…

    JavaScript 2023年6月11日
    00

  • javascript 双色球对奖器

    JavaScript 双色球对奖器是一个基于前端技术的小工具，帮助用户输入自己选的号码和彩票开奖号码，判断是否中奖，并给出相应的提示。以下是详细的攻略过程： 1. 准备工作 在编写 JavaScript 双色球对奖器之前，需要掌握 HTML、CSS 和 JavaScript 基本知识。同时，需要了解彩票双色球的规则和中奖方式，以便编写判断代码。 2. 编写 …

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