Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。超好用
话不多说,直接上教程

1、首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN。

 <!-- Link Swiper-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2http://www.580doc.com/css/swiper.min.css" rel="external nofollow" >
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2http://www.580doc.com/js/swiper.min.js"></script>

请勿直接引入Swiper中文网的文件

x <script src="http://www.swiper.com.cn/disthttp://www.580doc.com/js/swiper.min.js"></script>

x <link href="http://www.swiper.com.cn/disthttp://www.580doc.com/css/swiper.min.css" rel="external nofollow" />

2、CSS样式

 <style>
    .swiper-container {
    //你可以在这里设置宽高
      width: 50%;
      height: 50%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      /* Center slide text vertically */
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    img{
      width:250px;
    }
  </style>

3、HTML

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="img/000.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/001.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/002.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/003.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/004.jpg" alt=""></div>
    //添加图片
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>
  <!-- Add Arrows -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

4、javaScript

<script>
  var swiper = new Swiper('.swiper-container', {
    spaceBetween: 30,
    centeredSlides: true,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
</script>

 效果图

你只需要替换一下图片,和修改一下图片及轮播图的大小就可以轻轻松松写出一个很棒的轮播图,怎么样是不是很简单

补充:怎么用swiper实现匀速无缝轮播

1.设置属性

freeMode:true,

autoplay: {

delay:0

}

2.然后再修改或者覆盖样式

.swiper-container-free-mode>.swiper-wrapper {
  -webkit-transition-timing-function: linear; /*之前是ease-out*/
  -moz-transition-timing-function: linear;
  -ms-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
  margin: 0 auto;
}

补充2:移动端swiper.js中的坑

步骤:

1,渲染日历:日历是自己开发的(注意几点:1,获得当前日期;2,一个月多少天;3,闰月情况;4,每个月1号是礼拜几;。。。)

2,因项目比较近,所以采用了swiper.js控件来做滑动效果;

问题: 

1,首先遇到的是在ios上测试是没有问题的,包括UC,百度等浏览器;不过在魅族,华为手机上测试出现问题了-----不能来回切换;

解决方法:考虑到应该是兼容性问题,于是乎查找swiper.js官方文档,因为当时只是引用了swiper.js,而没有引入swiper.css和swiper.animate.js;

重新引入后,ok了,问题得到解决;

<link rel="stylesheet" href="../../styles/library/swiper.min.css" rel="external nofollow" />
<script src="../../scripts/common/swiper-3.3.1.min.js"></script>
<script src="../../scripts/common/swiper.animate.min.js"></script> 

2,引入需要的文件后,发现ios和安卓浏览器是没有问题的,但是,安卓app里又出现问题了,来回切换不流畅,此时自己也是百度了一下,没有找到解决方法
最后还得看官方文档,查看属性和方法
解决方案:

 // 轮播图--左右滑动和切换
  var mySwiper = new Swiper('.swiper-container',{
    pagination: '.pagination',
    loop:false,
    mode: 'horizontal',
    freeMode:false,
    touchRatio:0.5,
    longSwipesRatio:0.1,
    threshold:50,
    followFinger:false,
    observer: true,//修改swiper自己或子元素时,自动初始化swiper
    observeParents: true,//修改swiper的父元素时,自动初始化swiper
    onSlideChangeEnd:function(swiper){ // 当滑动结束后---月份日期切换同步左右左右切换
      changeMonth();
    }
  });

注意:初始化的时候添加的这几个属性,有不明白的可以查看官方文档;

温馨提示:swper.js我用的3xxx版本以上的,各个版本差别还是挺大的!

到此这篇关于Swiper.js插件超简单实现轮播图的文章就介绍到这了,更多相关Swiper.js 轮播图内容请搜索乐虎体育以前的文章或继续浏览下面的相关文章希望大家以后多多支持乐虎体育!

Swiper.js插件超简单实现轮播图的更多相关文章

  1. 【机制】js的闭包、执行上下文、作用域链

    1.从闭包说起什么是闭包一个函数和对其周围状态(词法环境)的引用捆绑在一起,这样的组合就是闭包。也就是说,闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中,每当创建一个函数,闭包就会在函数创建的同时被创建出来。上面是MDN对闭包的解释,这几句话可能不太好懂,没关系,......

  2. 原生JavaScript实现轮播图

    本文实例为大家分享了JavaScript实现轮播图的具体代码,供大家参考,具体内容如下效果:代码:* {margin: 0;padding: 0;}ul,li {list-style: none;}.banner {width: 1200px;height: 535px;border: 1px so......

  3. javascript中call,apply,bind的区别详解

    在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢。在说区别之前还是先总结一下三者的相似之处:1、都是用来改变函数的this对象的指向的。2、第一个参数都是this要指向的对象。3、都可以利用后续参数传参。那么他们的区别在哪里的,先看一个例子。var xw = {name ......

  4. javascript 数组(list)添加/删除的实现

    javascript 数组Array(list)添加/删除unshift:将参数添加到原数组开头,并返回数组的长度pop:删除原数组最后一项,并返回删除元素的值;如果数组为空则返回undefinedpush:将参数添加到原数组末尾,并返回数组的长度concat:返回一个新数组,是将参数添加到原数组中......

  5. 使用JS调用WebService接口

    <> $(document).ready(function () { var username = "admin"; var password = "123456";       /*==J......

  6. js加减乘除精确运算方法实例代码

    前言因为计算机数字是浮点型,所以在计算过程中通常得到的并不是一个准确的数据,所以在做一些数组运算的时候比较头疼,我们这里就来写一下精确运算的方法首先是加法 (这里以两个数据相加为例)function add(arg1, arg2) {arg1 = arg1.toString(), arg2 = ar......

  7. JS addEventListener()和attachEvent()方法实现注册事件

    在 JavaScript 的 DOM 事件模型中,通过调用对象的 addEventListener() 方法注册事件。用法如下:element.addEventListener(String type, Function listener, boolean useCaptrue);参数说明如下:ty......

  8. Swiper.js插件超简单实现轮播图

    Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。超好用话不多说,直接上教程1、首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN......

  9. JavaScript this关键字的深入详解

    一、前言this关键字是JavaScript中最复杂的机制之一。它是一个很特别的关键字,被自动定义在所有函数的作用域中。对于那些没有投入时间学习this机制的JavaScript开发者来说,this的绑定一直是一件非常令人困惑的事。二、了解this学习this的第一步是明白this既不指向函数自身也......

  10. js简单粗暴的发布订阅示例代码

    什么是发布/订阅?我打个比方,你去某个门店买衣服,你和门店店长相互并不认识,门店店长只管卖他的衣服,并不关心是谁来买,而你也只管买你想要的衣服,并不关心是哪个门店在卖,这时,门店和你就组成了一个发布/订阅的关系。当门店挂出衣服款式,你去找你想要的衣服,如果找到了,那就买下来,如果没找到,那就离开这家......

随机推荐

  1. python 基于UDP协议套接字通信的实现

    一、UPD实现单用户通信服务端:'''from socket import *server=socket(AF_INET,SOCK_DGRAM)- 这里代指的是一种数据报协议,数据报协议指的就是udp协议(补充: 数据报就是自己utp协议中有自己的头,有自己的数据部分)server.bind('IP......

  2. Java中的深浅拷贝问题,你清楚吗?

    一、前言拷贝这个词想必大家都很熟悉,在工作中经常需要拷贝一份文件作为副本。拷贝的好处也很明显,相较于新建来说,可以节省很大的工作量。在Java中,同样存在拷贝这个概念,拷贝的意义也是可以节省创建对象的开销。Object类中有一个方法clone(),具体方法如下:protected native Ob......

  3. 解决出现secure_file_priv null的问题

    在mysql安装目录的my.ini文件中的[mysqld]添加secure_file_priv = ' ';然后以管理员身份运行cmd,进入mysql/bin停止mysql服务net stop mysql,重新启动mysql服务net start mysql,登入mysql mysql -u roo......

  4. python 如何用 Hypothesis 来自动化单元测试

    高质量的代码离不开单元测试,而设计单元测试的用例往往又比较耗时,而且难以想到一些极端情况,本文讲述如何使用 Hypothesis 来自动化单元测试刷过力扣算法题的同学都知道,有时候觉得代码已经很完善了,一提交才发现很多情况没有考虑到。然后感叹力扣的单元测试真的牛比。因此,高质量的代码离不开单元测试,......

  5. 前端 javascript 实现文件下载的示例

    在 html5 中,a 标签新增了 download 属性,包含该属性的链接被点击时,浏览器会以下载文件方式下载 href 属性上的链接。示例:下载1. 前端 js 下载实现与示例通过 javascript 动态创建一个包含 download 属性的 a 元素,再触发点击事件,即可实现前端下载。代码......

  6. postman接口自动化测试之利用node.js和xmysql连接、操作数据库

    一、背景使用postman进行接口自动化测试时,除了要验证接口的返回,有时候还要同时验证数据库的数据,或者将接口返回的数据与数据库的数据做对比,检验数据的正确性。有的时候还需要在执行自动化case之前,造一些测试数据,或者在跑完自动化之后,删除测试数据。所以,我们需要在postman里连接并操作数据......

  7. 精通MySQL之架构篇

    老刘是即将找工作的研究生,自学大数据开发,一路走来,感慨颇深,网上大数据的资料良莠不齐,于是想写一份详细的大数据开发指南。这份指南把大数据的【基础知识】【框架分析】【源码理解】都用自己的话描述出来,让伙伴自学从此不求人。大数据开发指南地址如下:github:https://github.com/Bi......

  8. MongoDB 常用的数据类型和基本操作

    NO.1 MongoDB的常用数据类型 MongoDB中的文档类似json,我们知道,在json中,最常用的数据类型有null、bool、数组、字符串、数据、json对象等等。相对比较少,比如对于时间类型的数据,json是无法表示的,而MongoDB中对json进行了简单的优化,像......

  9. Java常见面试题之final在java中的作用是什么

    谈到final关键字,想必很多人都不陌生,在使用匿名内部类的时候可能会经常用到final关键字。另外,Java中的String类就是一个final类。一、final关键字的基本用法在Java中,final关键字可以用来修饰类、方法和变量(包括成员变量和局部变量)。下面就从这三个方面来了解一下fina......

  10. Java中EasyPoi导出复杂合并单元格的方法

    前言:上星期做了一个Excel的单元格合并,用的是EasyPoi,我之前合并单元格都是原生的,第一次使用EasyPoi合并也不太熟悉,看着网上自己套用,使用后发现比原生的方便些,贡献一下,也给其他用到合并而且用的是EasyPoi的小伙伴节省下时间。导出模板:坐标:版本号,自己来定,可以去官网查看:E......