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 相关文章推荐
jquery 简短几句代码实现给元素动态添加及获取提示信息
Sep 01 Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 Javascript
js实现div层缓慢收缩与展开的方法
May 11 Javascript
jquery淡入淡出效果简单实例
Jan 14 Javascript
ES6所改良的javascript“缺陷”问题
Aug 23 Javascript
canvas实现粒子时钟效果
Feb 06 Javascript
利用node.js爬取指定排名网站的JS引用库详解
Jul 25 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
微信小程序实现长按删除图片的示例
May 18 Javascript
让axios发送表单请求形式的键值对post数据的实例
Aug 11 Javascript
怎样在vue项目下添加ESLint的方法
May 16 Javascript
bootstrap table插件动态加载表头
Jul 19 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 数组遍历方法大全(foreach,list,each)
2010/06/30 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
phpcms的分类名称和类别名称的调用
2017/01/05 PHP
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
jQuery Ajax提交表单查询获得数据实例代码
2012/09/19 Javascript
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
Jquery实现仿京东商城省市联动菜单
2015/11/19 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
2016/06/21 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
手机端转换rem适应
2017/04/01 Javascript
Mac系统下Webstorm快捷键整理大全
2017/05/28 Javascript
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
React Hooks的深入理解与使用
2018/11/12 Javascript
python操作CouchDB的方法
2014/10/08 Python
浅析Python 中整型对象存储的位置
2016/05/16 Python
对Python的多进程锁的使用方法详解
2019/02/18 Python
Python jieba库用法及实例解析
2019/11/04 Python
Django中使用MySQL5.5的教程
2019/12/18 Python
python构造IP报文实例
2020/05/05 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
html5记忆翻牌游戏实现思路及代码
2013/07/25 HTML / CSS
英国最全面的橄榄球联盟门票网站:Live Rugby Tickets
2018/10/06 全球购物
我的中国梦口号
2014/06/16 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
趣味运动会开幕词
2015/01/28 职场文书
2015年新教师工作总结
2015/04/28 职场文书
宣传稿格式范文
2015/07/23 职场文书
Nginx内网单机反向代理的实现
2021/11/07 Servers
PHP正则表达式之RCEService回溯
2022/04/11 PHP
在ubuntu下安装go开发环境的全过程
2022/08/05 Golang