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 相关文章推荐
对YUI扩展的Gird组件 Part-1
Mar 10 Javascript
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
Sep 25 Javascript
很好用的js日历算法详细代码
Mar 07 Javascript
jQuery对象和Javascript对象之间转换的实例代码
Mar 20 Javascript
IE下双击checkbox反应延迟问题的解决方法
Mar 27 Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
微信小程序wx.request实现后台数据交互功能分析
Nov 25 Javascript
Vue.js实现图片的随意拖动方法
Mar 08 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 Javascript
vue实现条件叠加搜索的解决方法
May 28 Javascript
uniapp实现可滑动选项卡
Oct 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项目开发中最常用的自定义函数整理
2010/12/02 PHP
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
2014/05/15 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
js 禁用只读文本框获得焦点时的退格键
2010/04/25 Javascript
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
2015/10/26 Javascript
JavaScript File分段上传
2016/03/10 Javascript
浅析JavaScript中命名空间namespace模式
2016/06/22 Javascript
jQuery实现自动调用和触发某个事件的方法
2016/11/18 Javascript
js实现右键自定义菜单
2016/12/03 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
JS Select下拉框(支持输入模糊查询)
2017/02/04 Javascript
Express框架之connect-flash详解
2017/05/31 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
2018/08/29 Javascript
Vue Components 数字键盘的实现
2019/09/18 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
[40:50]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第四场
2014/05/24 DOTA
Python中AND、OR的一个使用小技巧
2015/02/18 Python
详解python之多进程和进程池(Processing库)
2017/06/09 Python
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
pandas DataFrame数据转为list的方法
2018/04/11 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
django 自定义过滤器(filter)处理较为复杂的变量方法
2019/08/12 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
青年创业培训欢迎词
2014/01/10 职场文书
监察建议书范文
2014/03/12 职场文书
研究生考核个人自我鉴定
2014/03/27 职场文书
推荐信怎么写
2014/05/09 职场文书
安全目标管理责任书
2014/07/25 职场文书
教师自我剖析材料
2014/09/29 职场文书
乌镇导游词
2015/02/02 职场文书
人力资源部岗位职责
2015/02/11 职场文书
自荐信格式模板
2015/03/27 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
2019年怎样写好导游词?
2019/07/02 职场文书