移动端触屏幻灯片图片切换插件idangerous swiper.js


Posted in Javascript onApril 10, 2017

强大的移动端触屏幻灯片图片和HTML内容切换插件idangerous swiper,支持自定义左右切换还是上下切换,支持多个分组切换,支持下拉更新切换,支持TAB方式切换等十几种切换效果,支持众多的选项配置,如:

speed:切换的速度(毫秒)

autoplay:自动播放的速度

mode:切换模式 horizontal(横向) vertical(竖向)

loop:是否循环播放true false

如此强大的配置功能,值得使用。

移动端触屏幻灯片图片切换插件idangerous swiper.js

使用方法:

1.加载插件

<link rel="stylesheet" href="path_to_css/idangerous.swiper.css">
<script defer src="path_to_js/idangerous.swiper-2.x.min.js"></script>

2.HTML内容

<div class="swiper-container">
 <div class="swiper-wrapper">
 <!--First Slide-->
 <div class="swiper-slide">
 <!-- Any HTML content of the first slide goes here -->
 </div>
 
 <!--Second Slide-->

 <div class="swiper-slide">
 <!-- Any HTML content of the second slide goes here -->
 </div>
 
 <!--Third Slide-->
 <div class="swiper-slide">
 <!-- Any HTML content of the third slide goes here -->

 </div>
 <!--Etc..-->

 </div>
</div>

3.函数调用

<script type="text/javascript">
window.onload = function() {
 var mySwiper = new Swiper('.swiper-container',{
 //Your options here:
 mode:'horizontal',
 loop: true
 //etc..

 }); 
}
</script>

插件支持jQuery和Zepto,如果使用这两者,请先加载jQuery.js

<script type="text/javascript">
$(function(){
 var mySwiper = $('.swiper-container').swiper({
 //Your options here:
 mode:'horizontal',
 loop: true
 //etc..
 });
});
</script>

源码下载:idangerous swiper.js

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

Javascript 相关文章推荐
jQuery boxy弹出层插件中文演示及使用讲解
Feb 24 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
May 24 Javascript
javascript中为某个元素指定事件的三种方式
Aug 07 Javascript
详解node如何让一个端口同时支持https与http
Jul 04 Javascript
vue router学习之动态路由和嵌套路由详解
Sep 21 Javascript
微信小程序中setInterval的使用方法
Sep 29 Javascript
js前端面试之同步与异步问题详解
Apr 03 Javascript
vue组件间通信六种方式(总结篇)
May 15 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
Aug 24 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 Javascript
详解vue 组件的实现原理
Nov 12 Javascript
使用Canvas绘制一个游戏人物属性图
Mar 25 Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 #Javascript
javascript深拷贝的原理与实现方法分析
Apr 10 #Javascript
Vue2递归组件实现树形菜单
Apr 10 #Javascript
JS判断两个对象内容是否相等的方法示例
Apr 10 #Javascript
javascript防篡改对象实例详解
Apr 10 #Javascript
jQuery EasyUI之验证框validatebox实例详解
Apr 10 #jQuery
ES6教程之for循环和Map,Set用法分析
Apr 10 #Javascript
You might like
PHP连接MSSQL2008/2005数据库(SQLSRV)配置实例
2014/10/22 PHP
php如何实现不借助IDE快速定位行数或者方法定义的文件和位置
2017/01/17 PHP
兼容Mozilla必须知道的知识。
2007/01/09 Javascript
javascript fullscreen全屏实现代码
2009/04/09 Javascript
jquery.validate使用攻略 第二部
2010/07/01 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
2014/10/20 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
2015/02/15 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
CSS+jQuery实现简单的折叠菜单
2016/12/20 Javascript
nodejs读写json文件的简单方法(必看)
2017/03/09 NodeJs
原生JS实现左右箭头选择日期实例代码
2017/03/14 Javascript
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
通过js修改input、select默认字体颜色
2017/04/19 Javascript
js禁止浏览器页面后退功能的实例(推荐)
2017/09/01 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
Python中的对象,方法,类,实例,函数用法分析
2015/01/15 Python
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
python日志logging模块使用方法分析
2019/05/23 Python
Django stark组件使用及原理详解
2019/08/22 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
顶级宝石首饰网络零售商:Angara
2016/10/25 全球购物
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
Boom手表官网:瑞典手表品牌,设计你的手表
2019/03/11 全球购物
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
毕业生个人求职信范文分享
2014/01/05 职场文书
护士自我介绍信
2014/01/13 职场文书
一年级学生评语
2014/04/23 职场文书
服务标语大全
2014/06/18 职场文书
行政秘书工作自我鉴定
2014/09/15 职场文书
会议邀请函
2015/01/30 职场文书
2015年护士节活动总结
2015/02/10 职场文书
大学生团员个人总结
2015/02/14 职场文书
《秋思》教学反思
2016/02/23 职场文书