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
iSlider手机平台JS滑动组件的更多相关文章
- 手机触屏滑动图片切换插件swiper.js
今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 【2015上半年总结】js开源组件开发系列索引
js开源组件开发系列一索引 2015.8 by 田想兵 个人网站 从3月份进入新公司以来,时经五个月,我以平均每周1个小组件的速度,已经完成的js组件有22个之余了,已基本上全部用到实际项目中,这些小 ...
- Swipe JS滑动插件
Swipe JS 是一个轻量级的移动滑动组件,支持 1:1 的触摸移动,阻力以及防滑性能都不错,可以让移动web应用展现更多的内容,能解决我们对于移动Web对滑动的需求. 官网:http://www. ...
- 一个H5的3D滑动组件实现(兼容2D模式)
起由 原始需求来源于一个项目的某个功能,要求实现3D图片轮播效果,而已有的组件大多是普通的2D图片轮播,于是重新造了一个轮子,实现了一个既支持2D,又支持3D的滑动.轮播组件. 实现思路 刚一开始肯定 ...
- 使用JavaScript调用手机平台上的原生API
我之前曾经写过一篇文章使用Cordova将您的前端JavaScript应用打包成手机原生应用,介绍了如何使用Cordova框架将您的用JavaScript和HTML开发的前端应用打包成某个手机平台(比 ...
- uni-城市列表滑动组件,点击字母跳转到指定位置
本插件由博主自主开发,比uni插件市场的城市列表滑动组件性能好,且不会出现闪屏的情况. 通过计算城市列表的高度实现滚动到指定位置,使用了uni滚动到指定位置的api city-chooce为页面入口页 ...
- 为Node.js编写组件的几种方式
本文主要备忘为Node.js编写组件的三种实现:纯js实现.v8 API实现(同步&异步).借助swig框架实现. 关键字:Node.js.C++.v8.swig.异步.回调. 简介 首先介绍 ...
- JS滑动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Vue.js多重组件嵌套
Vue.js多重组件嵌套 Vue.js中提供了非常棒的组件化思想,组件提高了代码的复用性.今天我们来实现一个形如 <app> <app-header></app-head ...
随机推荐
- bzoj3299 [USACO2011 Open]Corn Maze玉米迷宫
Description 今年秋天,约翰带着奶牛们去玩玉米迷宫.迷宫可分成NxM个格子,有些格子种了玉 米,种宥玉米的格子无法通行. 迷宫的四条边界上都是种了玉米的格子,其屮只有一个格子 没种,那就是 ...
- C# 导出 excel 复杂格式 html导出
/// <summary> /// 夜班津贴统计导出 /// </summary> public void ExportOtStat(string data) { var in ...
- paip.oracle query export to insert sql
paip.oracle query export to insert sql 作者Attilax , EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http:/ ...
- Linux 程序启停脚本
start.sh #!/bin/sh java -jar ./program.jar & echo $! > /var/run/program.pid stop.sh #!/bin/sh ...
- mahout源码分析之Decision Forest 三部曲之二BuildForest(1)
Mahout版本:0.7,hadoop版本:1.0.4,jdk:1.7.0_25 64bit. BuildForest是在mahout-examples-0.7-job.jar包的org\apache ...
- C#获取URL参数值(NameValueCollection)
在写程序的时候,我们经常需要对页面进行传参数,比如page?id=1234,那么在page这个页面中就直接可以使用string id = Request.QueryString["id&qu ...
- (转载)log4net 组件详解
1.概述 log4net是.Net下一个非常优秀的开源日志记录组件.log4net记录日志的功能非常强大.它可以将日志分不同的等级,以不同的格式,输出到不同的媒介.本文主要是介绍如何在Visual S ...
- android:versionCode和android:versionName
Android的版本可以在androidmainfest.xml中定义,主要有android:versionCode和android:versionName android:versionCode:主 ...
- c#访问各数据库的providerName各驱动
在machine.config(C:/WINDOWS/Microsoft.NET/Framework/v2.0.50727/CONFIG)文件中有这么一段: <system.data> & ...
- Flink Program Guide (8) -- Working with State :Fault Tolerance(DataStream API编程指导 -- For Java)
Working with State 本文翻译自Streaming Guide/ Fault Tolerance / Working with State ---------------------- ...