移动端触屏幻灯片图片切换插件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 相关文章推荐
JavaScript格式化数字的函数代码
Nov 30 Javascript
jQuery中绑定事件的命名空间详解
Apr 05 Javascript
『jQuery』名称冲突使用noConflict方法解决
Apr 22 Javascript
javascript闭包传参和事件的循环绑定示例探讨
Apr 17 Javascript
jQuery $.extend()用法总结
Jun 15 Javascript
jQuery插件实现大图全屏图片相册
Mar 14 Javascript
jQuery div拖拽用法实例
Jan 14 Javascript
node.js使用cluster实现多进程
Mar 17 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
AngularJS ionic手势事件的使用总结
Aug 09 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
Apr 10 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
Aug 14 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
DC《神奇女侠2》因疫情推迟上映 温子仁新恐怖片《恶性》撤档
2020/04/09 欧美动漫
收听短波不可能有声音清晰的品质吗
2021/03/01 无线电
PHP新手上路(十三)
2006/10/09 PHP
PHP中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
PHP 多维数组的排序问题 根据二维数组中某个项排序
2011/11/09 PHP
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
php代码检查代理ip的有效性
2016/08/19 PHP
Apache+PHP+MySQL搭建PHP开发环境图文教程
2020/08/06 PHP
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
javascript解决IE6下hover问题的方法
2015/07/28 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
2016/11/09 Javascript
老生常谈combobox和combotree模糊查询
2017/04/17 Javascript
BootStrap 导航条实例代码
2017/05/18 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
Python中用max()方法求最大值的介绍
2015/05/15 Python
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
Centos 升级到python3后pip 无法使用的解决方法
2018/06/12 Python
浅析python 中大括号中括号小括号的区分
2019/07/29 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
北京一家公司的.net开发工程师笔试题
2012/04/17 面试题
水利水电建筑施工应届生求职信
2014/07/04 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
岁月神偷观后感
2015/06/11 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
python b站视频下载的五种版本
2021/05/27 Python
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers