iSlider手机平台JS滑动组件,无任何插件依赖。它能够处理任何元素,例如图片或者DOM元素。它有如下特性:能够自定义动画,自带的动画包括default, rotate, flip 和 depth你能够简易地添加回调函数(onslidestart, onslide, onslideend, onslidechange)我们还支持滑动衰减效果,循环效果,自动滑动效果,水平/垂直滑动。兼容主流浏览器,懒人图库推荐下载!

使用方法:

1、你需要为iSlider先新建好数据:

var data = [{

height: 475,

width: 400,

content: "imgs/1.jpg",

},{

height: 527,

width: 400,

content: "imgs/2.jpg",

},{

height: 400,

width: 512,

content: "imgs/3.jpg",

}];

在页面插入以下HTML代码:

<div id="iSlider-wrapper"></div>

2 要使其运行,按下面例子新建ISlider类:

<script type="text/javascript">

var iSlider = new iSlider({

dom : document.getElementById('iSlider-wrapper'), // iSlider-wrapper于html代码里的id对应

data : data

});

</script>

3 如果你想加其它效果,可以按照我们demo/picture示例添加:

<script type="text/javascript">

var islider = new iSlider({

data: list,

dom: document.getElementById("iSlider-wrapper"),

isVertical: true,

isLooping: false,

isDebug: true,

isAutoplay: false,

animateType: 'rotate'

});

</script>

4 如果你想滑动DOM元素而非图片,你可以按以下的格式新建DOM数据:

var data = [{

'height' : '100%',

'width' : '100%',

'content' : '<div><h1>Home</h1><h2>This is home page</h2><p>home is pretty awsome</p><div>'

},{

'height' : '100%',

'width' : '100%',

'content' : '<div><h1>Page1</h1><h2>This is page1</h2><p>page1 is pretty awsome</p><div>'

},{

'height' : '100%',

'width' : '100%',

'content' : '<div><h1>Page2</h1><h2>This is Page2</h2><p>Page2 is pretty awsome</p><div>'

}];

其他更多的配置选项请看:

http://be-fe.github.io/iSlider/index.html

iSlider手机平台JS滑动组件的更多相关文章

  1. 手机触屏滑动图片切换插件swiper.js

    今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  2. 【2015上半年总结】js开源组件开发系列索引

    js开源组件开发系列一索引 2015.8 by 田想兵 个人网站 从3月份进入新公司以来,时经五个月,我以平均每周1个小组件的速度,已经完成的js组件有22个之余了,已基本上全部用到实际项目中,这些小 ...

  3. Swipe JS滑动插件

    Swipe JS 是一个轻量级的移动滑动组件,支持 1:1 的触摸移动,阻力以及防滑性能都不错,可以让移动web应用展现更多的内容,能解决我们对于移动Web对滑动的需求. 官网:http://www. ...

  4. 一个H5的3D滑动组件实现(兼容2D模式)

    起由 原始需求来源于一个项目的某个功能,要求实现3D图片轮播效果,而已有的组件大多是普通的2D图片轮播,于是重新造了一个轮子,实现了一个既支持2D,又支持3D的滑动.轮播组件. 实现思路 刚一开始肯定 ...

  5. 使用JavaScript调用手机平台上的原生API

    我之前曾经写过一篇文章使用Cordova将您的前端JavaScript应用打包成手机原生应用,介绍了如何使用Cordova框架将您的用JavaScript和HTML开发的前端应用打包成某个手机平台(比 ...

  6. uni-城市列表滑动组件,点击字母跳转到指定位置

    本插件由博主自主开发,比uni插件市场的城市列表滑动组件性能好,且不会出现闪屏的情况. 通过计算城市列表的高度实现滚动到指定位置,使用了uni滚动到指定位置的api city-chooce为页面入口页 ...

  7. 为Node.js编写组件的几种方式

    本文主要备忘为Node.js编写组件的三种实现:纯js实现.v8 API实现(同步&异步).借助swig框架实现. 关键字:Node.js.C++.v8.swig.异步.回调. 简介 首先介绍 ...

  8. JS滑动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. Vue.js多重组件嵌套

    Vue.js多重组件嵌套 Vue.js中提供了非常棒的组件化思想,组件提高了代码的复用性.今天我们来实现一个形如 <app> <app-header></app-head ...

随机推荐

  1. 1.elk 入门示例

    zjtest7-frontend:/usr/local/logstash-2.3.4/bin# ./logstash -e 'input{stdin{}} output{stdout{codec=&g ...

  2. Excel在任务栏中只显示一个窗口的解决办法

     Excel在任务栏中只显示一个窗口的解决办法  以前朋友遇到过这个问题,这次自己又遇到了,习惯了以前的那种在任务栏中显示全部窗口,方便用Alt+Tab键进行切换. 如果同时打开许多Excel工作簿, ...

  3. 蜂窝移动网络是什么,它和 Wi-Fi 有什么区别? 蓝牙和无线有什么区别?

    蜂窝移动网络是什么,它和 Wi-Fi 有什么区别? 转自知乎用户的一个回答: 原题问的是"数据流量是什么",不知道怎么又被改成"蜂窝移动网络是什么"了.说下个人 ...

  4. CoreData多表操作.

    这次给大家带来的是CoreData多表操作的使用. 首先我们要对CoreData来进行多表操作我们先要创建至少两个实体在工程中. 在创建完成这两个对应的工程实体文件和工程中的类文件后我们现在需要创建一 ...

  5. C#中的反射原理及应用(转)

    反射的概述 反射的定义:审查元数据并收集关于它的类型信息的能力.元数据(编译以后的最基本数据单元)就是一大堆的表,当编译程序集或者模块时,编译器会创建一个类定义表,一个字段定义表,和一个方法定义表等, ...

  6. HDU 5785 Interesting

    题目: 大概说给一个字符串,找到其所有子串[i...k]满足它是由两个回文串拼成的,求Σi*k. 分析: 用val[1][i]表示以i结尾的回文串的起始位置的和val[0][i]表示以i起始的回文串的 ...

  7. BestCoder Round #75 1003 - King's Order

    国王演讲后士气大增,但此时战争还没有结束,国王时不时要下发命令. 由于国王的口吃并没有治愈,所以传令中可能出现:“让第三军-军-军,到前线去” 这样的命令.由于大洋国在军队中安插了间谍 , 战事紧急, ...

  8. dede调取文章内容的第一张图片

    dede调用文章第一张图片(非缩略图)的实现方法 这篇文章主要是介绍dede调用文章第一张图片的实现代码,需要的朋友可以参考下 需要进行两个操作 第一步,修改include/extend.func.p ...

  9. js cookies存取删操作实例

    //写cookies函数 function SetCookie(name,value)//两个参数,一个是cookie的名子,一个是值 { var Days = 30; //此 cookie 将被保存 ...

  10. Javascript 多物体运动——逐行分析代码,让你轻松了解运动的原理

    我们先来看下之前的运动的代码,是否支持多物体运动,会出现怎么样的问题. <style type="text/css"> div { width: 100px; heig ...