dd11912bf770e45779396d240ade3d38.png

94a6dc5feabd4193c6b752bf51a273a1.png

插件描述:iSlider.js手机幻灯片代码制作手指滑动手机端图片轮播代码

iSlider是移动的滑动组件的最佳解决方案。在WEB 轮播图已经变得小儿科的现在,很多人会质疑重新写个移动端的价值?其实移动端与web的环境有很多不同,用户习惯,行为也有很大的差异,而且移动端的浏览器,应用场景和web 端也差别很大。总结一下区别:

移动端用户行为习惯区别(移动端多的是touch 事件,更注重手指与触摸屏的互动)

移动端屏幕(移动的屏幕大多小于C端,为了在更小的屏幕展示同样的内容,内容滑动已然成为用户操作习惯)

移动端多设备性(ipad、iphone、android phone、android pad,以及这些设备的横竖屏状态)

移动设备的更新换代的速度,以及手机浏览器厂商对标准支持的跟进,包括统一的webkit 核心的浏览器

那么iSlider 的出现,解决的根本问题是内容的分屏显示,通过滑动操作来表示上一页内容或是下一页内容。而iSlider 是用最优雅的方式去解决,尽可能的节省内存,提高性能。在功能上iSlider 支持:

图片和dom 两种类型滑动,图片的类型很适合读图类的app,dom 类型则可以根据需要配置成各式各样的webapp

自定义的事件回调,你可以在滑动中,滑动结束,或是滑动开始绑定自己的事件回调

可配置的滑动动画,在获得高性能的同时,你仍然可以指定一些特殊的高级的动画效果来完成你的app,iSlider 提供3d,flip,depth等动画方式来丰富你的滑动效果。

iSlider 会帮你处理好屏幕旋转事件,你只要考虑的是,屏幕旋转后,你的dom 或是 图片改如何显示。

iSlider 还有一些小功能,比如滑动边界递减,自动滑动,垂直水平滑动可配置。

而使用iSlider也非常容易上手,你只需要准备一个dom节点用来存放你的slider:

然后你需要准备展示的数据,这里展示的数据分两种类型,拿图片类型的slider 举例,你只需要准备好的是图片的json 数据,数据格式如下:var list = [{

height: 475,

width: 400,

content: "../public/imgs/1.jpg",

},{

height: 527,

width: 400,

content: "../public/imgs/2.jpg",

},{

height: 374,

width: 600,

content:"../public/imgs/9.jpg"}];

调用时候,需要对iSlider 实例化:

islider = new iSlider({

data: list,

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

isVertical: true,

isLooping: true,

isDebug: true,

isAutoplay: true,

animateType: '3d'});

这样就可以运行一个iSlider 的实例了,关于上面一些参数的意义,可以在Demo中看到

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐