iSlider手机平台JS滑动组件

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

时间: 2024-08-08 01:28:38

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

手机触屏滑动插件idangerous.swiper.js

手机触屏滑动插件 idangerous.swiper.js 演示地址:http://www.idangero.us/sliders/swiper/demos.php 下载地址:https://github.com/nolimits4web/Swiper

从零开始学android&lt;SeekBar滑动组件.二十二.&gt;

拖动条可以由用户自己进行手工的调节,例如:当用户需要调整播放器音量或者是电影的播放进度时都会使用到拖动条,SeekBar类的定义结构如下所示: java.lang.Object ? android.view.View ? android.widget.ProgressBar ? android.widget.AbsSeekBar ? android.widget.SeekBar 常用方法 public SeekBar(Context context) 构造 创建SeekBar类的对象 publi

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

本文主要备忘为Node.js编写组件的三种实现:纯js实现.v8 API实现(同步&异步).借助swig框架实现. 关键字:Node.js.C++.v8.swig.异步.回调. 简介 首先介绍使用v8 API跟使用swig框架的不同: (1)v8 API方式为官方提供的原生方法,功能强大而完善,缺点是需要熟悉v8 API,编写起来比较麻烦,是js强相关的,不容易支持其它脚本语言. (2)swig为第三方支持,一个强大的组件开发工具,支持为python.lua.js等多种常见脚本语言生成C++组件

微信公众平台Js API(WeixinApi)

zxlie/WeixinApi 微信公众平台Js API(WeixinApi)微信公众平台Js API(WeixinApi),布布扣,bubuko.com

JS表格组件神器bootstrap table详解(基础版)

这篇文章主要介绍了JS表格组件神器bootstrap table,bootstrap table界面采用扁平化的风格,用户体验比较好,更好兼容各种客户端,需要了解更多bootstrap table的朋友可以参考下 一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来.由于Bootstrap Table是Bootstrap的一个组件,所以它是依赖Bootstrap的,我们首先需要添加Bootstrap的引用.

谈谈Ext JS的组件——布局的使用方法续二

绝对布局(Ext.layout.container.Absolute) 绝对布局让我回想到了使用Foxpro开发的时候,哪时候的界面布局就是这样,通过设置控件的左上角坐标(x,y)和宽度来进行的,因为输入控件的 高度基本是固定的,所以不需要设置.在可视化编程没有出现之前,开发界面算是个苦差事,因为布局是需要花费不少功夫的,例如想要在已经定义好的组件中插入 一个组件,那就得重新修改插入位置以下的组件的坐标,这工作是比较枯燥无聊的,因而,在没必要的情况下,还是少选择这种布局模式. 绝对布局是使用CS

谈谈Ext JS的组件——组件基类:Ext.Component

概述 Ext.Component是所有Ext组件的基类,这在Ext.Component的API中第一句话就提到了.然后第二段说明了它包含的基本功能:隐藏/显示.启用/禁用以及尺寸控制等.除了以上这些基本功能,其实还包含了很多东西.当然,在API中不可能面面俱到,那么,我们应当如何去理解这个组件基类呢? Ext.Component===DIV 如果将一个Ext.Component渲染到页面,会看到该组件会简单的在页面中添加一个DIV标记,就是这么简单.也就是说,Ext.Component就相当于一

webapp之滑动组件(基于zepto)

一直都没有封装过一套移动web下的滑动组件,正巧今天公司没事,就闲下来写了一个半成品,称之为半成品是因为,循环效果暂时还没有添加. ; (function($) { $.fn.slider = function(opts) { this.each(function() { init.call(this, opts); }); return this; }; function init(opts) { var defaults = { cont: this, contWidth: false, /

谈谈Ext JS的组件——布局的使用方法续一

盒子布局 盒子布局主要作用是以水平(Ext.layout.container.HBox)或垂直方式(Ext.layout.container.VBox)来划分容器区域.这也是比较常有的布局方式. 使用盒子布局,除了要在容器定义layout配置项外,还需要在子组件指定子组件的宽度(HBox)或高度(VBox).指定宽度或高度有两种方 式,一是直接使用width或height来定义,一是使用flex配置项,根据比例来划分.下面通过一些示例来了解一下盒子布局的使用,这里只使用水平 盒子作为示例,垂直盒