swiper 自动图片无限轮播实现代码

下面是详细的讲解。

Swiper 自动图片无限轮播实现

Swiper 是一个基于 jQuery 的开源、免费的移动端触摸滑动插件,可以基于它实现图片无限轮播的效果。

具体步骤如下:

1. 引入 Swiper 库的 CSS和JS文件

在 HTML 文件的 标签内引入 CSS 文件,在 标签内引入 JS 文件。

<head>
  <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
</head>

<body>
  <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
</body>

2. 构建 HTML 结构

需要给图片添加容器,并给每个图片添加一个单独的类,方便后面的控制。

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img class="slide-img" src="image1.jpg">
    </div>
    <div class="swiper-slide">
      <img class="slide-img" src="image2.jpg">
    </div>
    <div class="swiper-slide">
      <img class="slide-img" src="image3.jpg">
    </div>
  </div>
</div>

3. 初始化 Swiper

在 JavaScript 文件中,使用以下代码初始化 Swiper,实现自动图片无限轮播功能:

var mySwiper = new Swiper('.swiper-container',{
  loop: true,
  autoplay: {
    delay: 3000,
    disableOnInteraction: false,
  },
})

在上面代码中,loop 设置为 true,则图片会在到达最后一张之后自动返回第一张,实现无限轮播。

autoplay 为自动播放设置,delay 为播放延迟时间,disableOnInteraction 为用户操作时是否停止自动播放。

示例1:Swiper 自动图片无限轮播实现

实现效果:给出三张图片进行自动无限轮播。

<head>
  <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
</head>

<body>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img class="slide-img" src="image1.jpg">
      </div>
      <div class="swiper-slide">
        <img class="slide-img" src="image2.jpg">
      </div>
      <div class="swiper-slide">
        <img class="slide-img" src="image3.jpg">
      </div>
    </div>
  </div>

  <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
  <script>
    var mySwiper = new Swiper('.swiper-container',{
      loop: true,
      autoplay: {
        delay: 3000,
        disableOnInteraction: false,
      },
    })
  </script>
</body>

示例2:多个Swiper实现自动无限轮播

实现效果:给出两个ID不同的Swiper,进行自动无限轮播。

<head>
  <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
</head>

<body>
  <!-- Swiper1 -->
  <div class="swiper-container" id="swiper1">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img class="slide-img" src="image1.jpg">
      </div>
      <div class="swiper-slide">
        <img class="slide-img" src="image2.jpg">
      </div>
      <div class="swiper-slide">
        <img class="slide-img" src="image3.jpg">
      </div>
    </div>
  </div>

  <!-- Swiper2 -->
  <div class="swiper-container" id="swiper2">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img class="slide-img" src="image4.jpg">
      </div>
      <div class="swiper-slide">
        <img class="slide-img" src="image5.jpg">
      </div>
      <div class="swiper-slide">
        <img class="slide-img" src="image6.jpg">
      </div>
    </div>
  </div>

  <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
  <script>
    // Swiper1
    var swiper1 = new Swiper('#swiper1',{
      loop: true,
      autoplay: {
        delay: 3000,
        disableOnInteraction: false,
      },
    })

    // Swiper2
    var swiper2 = new Swiper('#swiper2',{
      loop: true,
      autoplay: {
        delay: 2000,
        disableOnInteraction: false,
      },
    })
  </script>
</body>

这两个 Swiper 分别为 swiper1 和 swiper2,分别完成自动无限轮播效果。其中,swiper1 的自动轮播时间为 3 秒,swiper2 的自动轮播时间为 2 秒。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:swiper 自动图片无限轮播实现代码 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 基于jquery实现轮播特效

    基于jQuery实现轮播特效可以使用jQuery的animate()方法和定时器来实现。该过程分为以下几步: 步骤1:HTML与CSS结构 首先需要在HTML页面中声明一个轮播容器和多个轮播项,如下所示: <div class="carousel"> <div class="item active"&…

    css 2023年6月10日
    00
  • Bootstrap每天必学之按钮

    Bootstrap每天必学之按钮 Bootstrap是一个广受欢迎的前端开发框架,提供了一套可重用的UI组件,使开发者能够快速构建漂亮且高效的网站和应用程序。按钮是Bootstrap中最基本的组件之一,本文将为您介绍Bootstrap按钮的完整攻略。 Bootstrap按钮的基本用法 Bootstrap按钮有多种样式,可以通过不同的类名进行选择和应用。最基本…

    css 2023年6月11日
    00
  • js正确获取元素样式详解

    下面就为你讲解如何正确获取元素样式的完整攻略。 1. 使用style属性获取元素样式 普遍情况下,我们使用JavaScript获取元素样式时,最开始的想法可能是通过元素的style属性来获取。示例代码如下: // 获取id为box的元素的背景颜色 var box = document.getElementById(‘box’); var bgColor = …

    css 2023年6月10日
    00
  • Web时代变迁及html5与html4的区别

    Web时代变迁及html5与html4的区别: Web从诞生至今,经历了不少的变迁。目前我们广泛使用的Web大多数是基于HTML,而HTML也从刚开始的HTML4逐渐演变至HTML5。HTML5相较于HTML4,新增了一些特性和改进了一些性能,下面我们详细讲解HTML5与HTML4的区别。 一、HTML5与HTML4的语言类型 HTML5:<!DOCT…

    css 2023年6月9日
    00
  • 初学者必看:所有CDR术语和概念列表

    接下来我会给你详细讲解“初学者必看:所有CDR术语和概念列表”的完整攻略。 标题 首先,我们要为这篇攻略添加一个合适的标题。根据内容,可以起名为“初学者必看:CDR术语和概念列表详解”。 概述 接下来,我们可以在文章开头加上一个简短的概述,让读者知道这篇攻略的目的和内容。 本篇攻略将详细解释CDR术语和概念,为初学者提供全面的了解,并举例说明CDR文件和CD…

    css 2023年6月13日
    00
  • CSS揭秘之多重边框的实现

    CSS揭秘之多重边框的实现,可以使用伪元素和box-shadow属性实现。实现步骤如下: 使用伪元素实现多重边框 为目标元素添加position: relative属性,以便在伪元素中设置绝对定位。 使用::before和::after创建两个伪元素,用于实现前景和背景的多重边框效果。 分别设置伪元素的content属性为空字符串,position属性为绝对…

    css 2023年6月10日
    00
  • jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)

    jQuery实现带缩略图的焦点图片切换(自动播放/响应鼠标动作)攻略 1. 准备工作 在实现本攻略前,我们需要准备以下内容: 最新版的jQuery库,在编写代码时建议使用jQuery v3.x 版本; Html页面中,包含用于展示焦点图片切换的元素,例如id为carousel-container的元素用于显示切换的图片; Html页面中,包含用于展示缩略图的…

    css 2023年6月10日
    00
  • javascript实例分享—具有立体效果的图片特效

    下面是关于“JavaScript实例分享—具有立体效果的图片特效”的完整攻略。 一、需求分析 在页面上呈现出一组有立体感的图片特效,使得用户能够得到更佳的使用体验和视觉效果。 二、技术方案 我们可以借助JavaScript来实现这个需求。具体实现步骤如下: 在HTML中使用<img>标签来加载需要呈现的图片 使用CSS对这些图片进行基本的样式…

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