移动端轮播图，自动切换 - swiper插件

关注

原创最新推荐文章于 2026-07-29 10:59:21 发布 1.5k 阅读 AI 写同款· GEO 优化 ›

Swiper插件的基本使用方法和案例 Swiper插件的基本使用方法和案例一、Swiper是什么？ Swiper常用于移动端网站的内容触摸滑动 Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！二、Swiper使用的步骤步骤一、点我进入Swiper官网，下载Swiper animate 动画js和Swiper animate 动阅读详情

移动端轮播图使用的 swiper 插件，版本是 Swiper 4.5.0

首先引入 swiper.min.css 以及 swiper.min.js

在 html 中，搭好模板

<div class="swiper-container">
     <div class="swiper-wrapper">
         <div class="swiper-slide">
             <img src="../../img/1.jpg" alt="" />
         </div>
         <div class="swiper-slide">
             <img src="../../img/2.jpg" alt="" />
         </div>
         <div class="swiper-slide">
             <img src="../../img/3.jpg" alt="" />
         </div>
     </div>
     <!-- 分页器 -->
     <div class="swiper-pagination"></div>
 </div>

在 js 中调用插件，并根据自己的需求进行自定义

/*轮播图*/
var mySwiper = new Swiper ('.swiper-container', {
    loop: true,
    autoplay: {
        delay: 3000,//3秒切换一次
        disableOnInteraction: false
    },
    pagination: {
        el: '.swiper-pagination',
    }
})

收录于