swiper移动端轮播插件(触碰图片之后停止轮播)


Posted in Javascript onDecember 28, 2017

本文实例为大家分享了swiper移动端轮播插件,供大家参考,具体内容如下

下面是我遇到的问题,也是用此插件常用的几个参数,如果你的轮播不需要很复杂,看本文就可以解决。假如你想多了解些, 看官们这里请 swiper 插件的官方地址。

第一步 引入 swiper.min.js

<script src="../style/js/swiper.min.js"></script>

第二步 html

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img alt="" src="http://wx.okair.net/wxpic/wxb2c/indexpage/index_banner1.jpg">
    </div>
    <div class="swiper-slide">
      <img alt="" src="http://wx.okair.net/wxpic/wxb2c/indexpage/index_banner2.jpg">
    </div>
    <div class="swiper-slide">
      <img alt="" src="http://wx.okair.net/wxpic/wxb2c/indexpage/index_banner3.jpg">
    </div>
  </div>
  <div class="swiper-pagination"></div> <!--需要轮播序号的时候写-->
</div>

第三步 调用 ( 重点来了 )

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

现在这种情况下,图片可以自动轮播,但是当用手触碰之后,就会停止轮播,所以要再添加一个参数

var mySwiper = new Swiper('.swiper-container', {
    pagination : '.swiper-pagination',
    loop : true,
    autoplay : 3000,
    autoplayDisableOnInteraction : false  /* 注意此参数,默认为true */ 
});

无论怎么滑,轮播事件都会重新触发。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
根据地区不同显示时间的javascript代码
Aug 13 Javascript
传智播客学习之java 反射
Nov 22 Javascript
js自定义事件代码说明
Jan 31 Javascript
jquery实现的V字形显示效果代码
Oct 27 Javascript
easyui form validate总是返回false的原因及解决方法
Nov 07 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
Mar 09 Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 Javascript
vue中关闭eslint的方法分析
Aug 04 Javascript
微信小程序实现左右列表联动
May 19 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 Javascript
关于Js中new操作符的作用详解
Feb 21 Javascript
Vue组件通信之Bus的具体使用
Dec 28 #Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 #Javascript
Swiper自定义分页器使用详解
Dec 28 #Javascript
swiper自定义分页器使用方法详解
Sep 14 #Javascript
JavaScript实现数值自动增加动画
Dec 28 #Javascript
详解如何优雅地在React项目中使用Redux
Dec 28 #Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 #Javascript
You might like
php面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
PHP图片水印类的封装
2017/07/06 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
在PHP中实现使用Guzzle执行POST和GET请求
2019/10/15 PHP
PHP简单实现图片格式转换(jpg转png,gif转png等)
2019/10/30 PHP
Ctrl+Enter提交内容信息
2006/06/26 Javascript
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
JavaScript DOM 学习第三章 内容表格
2010/02/19 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
2014/12/15 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
2017/02/10 Javascript
利用JS制作万年历的方法
2017/08/16 Javascript
原生JavaScript实现remove()和recover()功能示例
2018/07/24 Javascript
解决vue接口数据赋值给data没有反应的问题
2018/08/27 Javascript
JavaScript This指向问题详解
2019/11/25 Javascript
jQuery操作选中select下拉框的值代码实例
2020/02/07 jQuery
闭包在python中的应用之translate和maketrans用法详解
2014/08/27 Python
Python中bisect的用法
2014/09/23 Python
Python标准库之sqlite3使用实例
2014/11/25 Python
Python中的time模块与datetime模块用法总结
2016/06/30 Python
python图片验证码生成代码
2016/07/02 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
Python3多线程爬虫实例讲解代码
2018/01/05 Python
python 检查文件mime类型的方法
2018/12/08 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
个人社会实践自我鉴定
2014/03/24 职场文书
社区平安建设方案
2014/05/25 职场文书
环境科学专业教师求职信
2014/07/12 职场文书
暑期社会实践证明书
2014/11/17 职场文书
机器人瓦力观后感
2015/06/12 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书