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的图片场景标注提示弹窗特效
Jan 05 Javascript
前端js文件合并的三种方式推荐
May 19 Javascript
bootstrap table单元格新增行并编辑
May 19 Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
Sep 23 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
Dec 27 Javascript
vue之浏览器存储方法封装实例
Mar 15 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
vue webpack重写cookie路径的方法
Jul 10 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
Aug 28 Javascript
吃通javascript正则表达式
Apr 21 Javascript
vue特效之翻牌动画
Apr 20 Vue.js
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个人网站架设连环讲(二)
2006/10/09 PHP
用PHP和ACCESS写聊天室(三)
2006/10/09 PHP
在Linux系统的服务器上隐藏PHP版本号的方法
2015/06/06 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
PHP5.3新特性小结
2016/02/14 PHP
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
2009/05/25 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
iframe如何动态创建及释放其所占内存
2014/09/03 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
Bootstrap CSS组件之大屏幕展播
2016/12/17 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
Vue实现底部侧边工具栏的实例代码
2018/09/03 Javascript
js中实例与对象的区别讲解
2019/01/21 Javascript
JS 事件机制完整示例分析
2020/01/15 Javascript
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python下载懒人图库JavaScript特效
2015/05/28 Python
python获取指定时间差的时间实例详解
2017/04/11 Python
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
python复制列表时[:]和[::]之间有什么区别
2018/10/16 Python
Python csv模块使用方法代码实例
2019/08/29 Python
springboot配置文件抽离 git管理统 配置中心详解
2019/09/02 Python
python求前n个阶乘的和实例
2020/04/02 Python
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
机电专业个人自荐信格式模板
2013/09/23 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
库房保管员岗位职责
2014/04/07 职场文书
集中采购方案
2014/06/10 职场文书
新闻学专业求职信
2014/07/28 职场文书
学校学习型党组织建设心得体会
2019/06/21 职场文书
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL
68行Python代码实现带难度升级的贪吃蛇
2022/01/18 Python