iSlider

专注于移动端的滑动解决方案
授权协议 MIT
开发语言 JavaScript HTML/CSS
所属分类 jQuery 插件、 jQuery图片展示/幻灯插件
软件类型 开源软件
地区 不详
投 递 者 郤旭东
操作系统 跨平台
开源组织 百度
适用人群 未知
 软件概览

iSlider是一个表现出众,轻量且高性能,无任何库依赖的跨平台滑动控件。它能够处理大多数的滑动场景,提供多种切换动画效果,展示多种类型的场景。

特性

  • 优秀的性能,更少的内存占用;
  • 提供丰富的动画切换效果,自带的效果包括 default, rotate, depth, flow, flip, card, fade 等,并且可以进行无限的扩展;
  • 提供丰富的回调触发器,并且添加回调函数极为方便,无论在初始化还是运行过程中;
  • 支持滑动衰减效果,循环效果,自动滑动效果,水平/垂直滑动等众多参数,且功能皆可配置;
  • 自动适配桌面鼠标动作与移动端手势,方便测试与跨平台使用;
  • 支持图片预加载,优秀的用户体验;
  • [插件] 提供多种插件,如切换按钮、场景指示器、图片缩放等,提供插件注册、管理等方法方便自定义扩展;
  • [2.0+] 可以按需加载需要的功能(效果 或 插件);
  • [2.0+] 支持更多种类的元素置入,自动匹配数据类型,识别图片并进行预加载;
  • [2.0+] 更完善的代理事件管理机制,优化内存占用;
  • [2.0+] 更加丰富的回调事件,更灵活的事件管理、触发机制。

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

var data = [{
    height: 414,
    width: 300,
    content: "imgs/1.jpg",
},{
    height: 414,
    width: 300,
    content: "imgs/2.jpg",
},{
    height: 414,
    width: 300,
    content: "imgs/3.jpg",
}];

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

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>'
}];

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

<script type="text/javascript">
    var islider = new iSlider({
        dom : document.getElementById('iSlider-wrapper'),
        data : data,
        duration: 2000,
        isVertical: true,
        isLooping: true,
        isDebug: true,
        isAutoplay: true
    });
</script>

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

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

  • iSlider 的依赖:iSlider 不依赖任何库或是框架,你可以很轻松的把他用在自己的项目中,不会和zepto 或是jqmobi 冲突。

  • 体积大小:iSlider 压缩后代码2kb,你可以很随意的打包在你的项目中。

  • 性能上:iSlider借助了手机硬件加速,所有的动画都尽可能重用dom ,并且使用尽可能少dom 来完成整个渲染,支持无尽的滚动,并且在手指快速滑动中也达到流畅的体验。

  • 开发资源包在这里: http://download.csdn.net/detail/snow_finland/8763729 其中有官网原始版本和楼主优化过的版本可选择(楼主优化的部分都用注释标出了) 官网地址: http://be-fe.github.io/iSlider/ 需要用到islider时,可以包含islider.js的文件,然后js中做如下调用: var islider_tpl =

  •  本篇文章地址:https://www.cnblogs.com/Thehorse/p/11601032.html css #iSlider-effect-wrapper { height: 220px; width: 100%; margin: 0 auto; margin-top: 0.2rem; overflow: hidden; position: relative; } .iSlider-

  • 1、参考在线资料: 引用 https://github.com/BE-FE/iSlider/blob/master/README_Chinese.md 2、demo实例: var platform = window.Android || window; function showFun(str1,str2,hData){ var sData = [ { 'content'

  • 上一篇介绍了 iSlider 这款网页轮播图片插件的基本使用: HTML5实现webApp中图片轮播的效果(一)之基本使用 接下来看看在实际应用的过程中会遇到哪些问题 1、从接口中动态加载需要呈现的图片以及相关的内容数据 如果用到这款插件来实现需求,大多数时候我们不会直接放固定的图片或者数据再这个容器里,最合理的方式应该是从服务端加载数据构造出数据源,来保证我们展示内容的灵活性和可扩展性 在上一篇

  • CSS: .iSlider { height: 13.0rem; width: 100%; overflow: hidden; position: relative; margin: 0 auto; } .iSlider ul { list-style: none; padding: 0; margin: 0; height: 100%; overflow

  • islider功能介绍: /** * iSlider 高性能全屏滑动组件 * @class iSlider * @param {object} opts * @param {string} opts.wrap='.wrap' 容器 * @param {string} opts.item='.item' 滚动单元的元素 * @param {string} opts.playClas

  • //创建UISlider,高度是定值,但是不能设置为0     //如果高度为0  滑动不了     UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake(20, 50, 200, 10)];     //设置最值,别设置反了,不然不能滑动     slider.maximumValue = 1;     slider.mini

  • 开发资源包在这里: http://download.csdn.net/detail/snow_finland/8763729 其中有官网原始版本和楼主优化过的版本可选择(楼主优化的部分都用注释标出了) 官网地址: http://be-fe.github.io/iSlider/ 需要用到islider时,可以包含islider.js的文件,然后js中做如下调用: var islider_tpl =

 相关资料
  • 本文向大家介绍vue移动端的左右滑动事件详解,包括了vue移动端的左右滑动事件详解的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了vue移动端左右滑动事件,供大家参考,具体内容如下 关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。 更多vue学习教程请阅读专题《vue实战教程》 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍Android listview的滑动冲突解决方法,包括了Android listview的滑动冲突解决方法的使用技巧和注意事项,需要的朋友参考一下 Android listview的滑动冲突解决方法 在Android开发的过程中,有时候会遇到子控件和父控件都要滑动的情况,尤其是当子控件为listview的时候。就比如在一个ScrollView里有一个listview,这种情况较常见

  • 移动端APP部署及安全解决方案 概述 InforMobile移动应用产品不仅支持在局域网(LAN)环境中的部署使用,也支持在internet(互联网)环境中的部署使用。局域网和互联网环境不同,局域网是一个相对封闭的内部网络环境,而互联网则是完全开放的网络,因此对服务部署和数据安全控制有明显的区别。针对企业安全方面的考虑和实际需要,InforMobile移动应用产品提供了一套完整的App部署及安全解

  • 本文向大家介绍clipboard.js在移动端复制失败的解决方法,包括了clipboard.js在移动端复制失败的解决方法的使用技巧和注意事项,需要的朋友参考一下 1.前沿 一句话介绍下clipboard.js:实现了纯 JavaScript (无 Flash)的浏览器内容复制到系统剪贴板的功能。 在项目中使用clipboard.js插件去实现点击按钮,复制一段网址到剪切板的功能。功能做好后,一开

  • 本文向大家介绍Android滑动事件冲突的解决方法,包括了Android滑动事件冲突的解决方法的使用技巧和注意事项,需要的朋友参考一下 滑动是Android中不可缺少的一部分,多个滑动必然会产生冲突,比如我们最常见的是ScrollView中嵌套了ListView,一般做法是计算出ListView的总高度,这样就不用去滑动ListView了。又比如一个ViewPager嵌套Fragment,Frag

  • 本文向大家介绍解决vue移动端适配问题,包括了解决vue移动端适配问题的使用技巧和注意事项,需要的朋友参考一下 1,先看看网上关于移动端适配讲解 再聊移动端页面适配,rem和vw适配方案! 基础点:rem相对根节点字体的大小。所以不用px; 根字体:字体的大小px; px:你就当成cm(厘米)这样的东西吧; 基准:750设计稿; 这是方案的基础理论,在这个基础上,我们还要搞明白,到底要干一件什么事

  • 本文向大家介绍详解iOS中position:fixed吸底时的滑动出现抖动的解决方案,包括了详解iOS中position:fixed吸底时的滑动出现抖动的解决方案的使用技巧和注意事项,需要的朋友参考一下 两种抖动 为什么抖动还会有两种? 其实是我碰到过两种抖动的场景,第一个场景是native的抖动,第二个场景是h5的抖动。 native的抖动 前端开发人员会在app中打开webview,这个时候i

  • 本文向大家介绍浅谈Android View滑动冲突的解决方法,包括了浅谈Android View滑动冲突的解决方法的使用技巧和注意事项,需要的朋友参考一下 引言 这一篇文章我们就通过介绍滑动冲突的规则和一个实例来更加深入的学习View的事件分发机制。 1、外部滑动方向和内部滑动方向不一致 考虑这样一种场景,开发中我们经常使用ViewPager和Fragment配合使用所组成的页面滑动效果,很多主流