移动端触屏幻灯片图片切换插件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 相关文章推荐
firefox浏览器下javascript 拖动层效果与原理分析代码
Dec 04 Javascript
jQuery中jqGrid分页实现代码
Nov 04 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
Jun 24 Javascript
javascript中使用正则表达式清理table样式的代码
Apr 01 Javascript
jQuery实现菜单栏导航效果
Aug 15 jQuery
Node调用Java的示例代码
Sep 20 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
Mar 17 Javascript
JavaScript 下载svg图片为png格式
Jun 21 Javascript
聊聊Vue 中 title 的动态修改问题
Jun 11 Javascript
详解Vue中的自定义指令
Dec 07 Vue.js
React服务端渲染原理解析与实践
Mar 04 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
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
验证token、回复图文\文本、推送消息的实用微信类php代码
2016/06/28 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
详解AngularJS Filter(过滤器)用法
2015/12/28 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
js面向对象方式实现拖拽效果
2021/03/03 Javascript
Python安装第三方库的3种方法
2015/06/21 Python
Python二分查找详解
2015/09/13 Python
使用Python神器对付12306变态验证码
2016/01/05 Python
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
Python中easy_install 和 pip 的安装及使用
2017/06/05 Python
python实现按长宽比缩放图片
2018/06/07 Python
Python3解释器知识点总结
2019/02/19 Python
python支持多线程的爬虫实例
2019/12/21 Python
python给指定csv表格中的联系人群发邮件(带附件的邮件)
2019/12/31 Python
专门出售各种儿童读物的网站:Put Me In The Story
2016/08/07 全球购物
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
便利店投资创业计划书
2014/02/08 职场文书
2014年基层党组织公开承诺书
2014/03/29 职场文书
诉前财产保全担保书
2014/05/20 职场文书
平安建设工作方案
2014/06/02 职场文书
2014年药剂科工作总结
2014/11/26 职场文书
个人催款函范文
2015/06/24 职场文书
婚礼迎宾词大全
2015/08/10 职场文书
初级职称评定工作总结
2015/08/13 职场文书
2016秋季运动会前导词
2015/11/25 职场文书
详解Python内置模块Collections
2022/03/22 Python