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中 javascript:void(0) 用法详解

    js中 javascript:void(0) 用法详解 在JavaScript开发中，我们经常会遇到一种URL地址是”javascript:void(0)”的情况，它本身并不是一个有效的URL，而是一种特殊的语法，它的应用范围非常广泛。本文将详细讲解”javascript:void(0)”的用法。 1. 作为超链接的href值 最常见的用法是将”javasc…

    JavaScript 2023年5月18日
    00

  • JavaScript setTimeout和setInterval的用法与区别详解

    JavaScript setTimeout和setInterval的用法与区别详解 setTimeout()和setInterval()是JavaScript中的两个重要函数，它们都用于实现JavaScript中的定时器。通常，我们使用这两个函数来延迟执行一段代码或者重复执行一段代码。但是setTimeout()和setInterval()用法和区别还是有很…

    JavaScript 2023年6月11日
    00

  • 使用BootStrapValidator完成前端输入验证

    使用 BootStrapValidator 完成前端输入验证的完整攻略如下： 步骤一：引入 BootStrap 和 BootStrapValidator 库 首先，需要引入 BootStrap 和 BootStrapValidator 两个库： <!– BootStrap CSS文件 –> <link rel="stylesh…

    JavaScript 2023年6月10日
    00

  • iOS WKWebView适配实战篇

    iOS WKWebView适配实战篇的完整攻略主要涉及以下几个方面： 1. 了解WKWebView WKWebView是苹果官方提供的一个用于iOS和macOS平台的现代化Web视图，可以直接预览网页，还支持JavaScriptCore和WebViewJavascriptBridge等桥接方式。相比于旧版的UIWebView，WKWebView更加内存友好、…

    JavaScript 2023年6月11日
    00

  • JavaScript通过字符串调用函数的实现方法

    JavaScript可以通过字符串调用函数的方法称为函数调用方法，也就是将字符串转化成函数名称并直接调用对应的函数。下面是一些实现方法的示例说明： 1. 使用eval()函数实现字符串调用函数 使用eval()函数可以将字符串解析成JS代码并执行，从而实现字符串调用函数的方法。 // 定义需要调用的函数 function greeting(message) …

    JavaScript 2023年5月28日
    00

  • jsonp跨域请求详解

    那么让我们来详细讲解一下“jsonp跨域请求详解”的完整攻略。 什么是jsonp? JSONP（JSON with padding）是 JSON 的一种“使用模式”，可以让网页从别的域名（网站）那获取资料，即跨域请求数据，是一种非正式传输协议。 JSONP通过动态插入script标签的方式实现跨域请求，因为从不同域名下请求js文件是被允许的。JSONP传输的…

    JavaScript 2023年6月11日
    00

  • 实例教程 纯CSS3打造非常炫的加载动画效果

    通过本实例教程，我们将使用纯 CSS3 技术来构建一些极其酷炫的网站加载动画效果。在本教程中，我们将学习如何使用 CSS3 的关键帧动画和过渡方法来创建许多有趣的动画。 1. 准备工作 在开始编写动画之前，需要先准备好一个 HTML 文件。你可以在文件中添加一些模拟加载过程的标签来测试你的动画。一些可以用于这个目的的标签是：div，span，img 等。 2…

    JavaScript 2023年6月11日
    00

  • Vue elementUI实现免密登陆与号码绑定功能

    下面是详细的Vue elementUI实现免密登陆与号码绑定功能的攻略： 简介 Vue elementUI是常用的前端框架之一，它有完善的组件库，可以方便地实现各种功能。本次攻略将讲解如何使用Vue elementUI实现免密登陆与号码绑定功能。 免密登陆功能 前提条件 需要做到以下几点： 用户在第一次使用时填写并提交了手机号码； 站点后端需要可以将用户手机…

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