当前位置：首页 > 软件库 > jQuery 插件 > jQuery图片展示/幻灯插件 >

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 来完成整个渲染，支持无尽的滚动，并且在手指快速滑动中也达到流畅的体验。

使用案例

【总结】【图片预览】手机预览图片插件iSlider使用总结分类：图片预览...

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

本篇文章地址：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-
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'
HTML5实现webApp中图片轮播的效果（二）之 iSlider 爬坑经历

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

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.js

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

//创建UISlider，高度是定值，但是不能设置为0 //如果高度为0 滑动不了 UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake(20, 50, 200, 10)]; //设置最值,别设置反了，不然不能滑动 slider.maximumValue = 1; slider.mini
【总结】【图片预览】手机预览图片插件iSlider使用总结

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

iSlider

同类工具

相关阅读

相关文章

相关问答

相关文档