iSlider手机端图片滑动切换插件

所属分类:媒体-幻灯片和轮播图

 78606  497  查看评论 (41)
分享到微信朋友圈
X
iSlider手机端图片滑动切换插件 ie兼容10

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:

<div id="canvas"></div>

然后你需要准备展示的数据,这里展示的数据分两种类型,拿图片类型的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中看到

相关插件-幻灯片和轮播图

基于anime.js全屏图片视差旋转切换

基于anime.js制作全屏响应式的图片轮播展示效果
  幻灯片和轮播图
 27666  445

Jquery轮播图

简洁大气轮播图插件,可控制点击切换或者移至切换。代码逻辑清晰,便于学习。授人以鱼不如授人以渔。
  幻灯片和轮播图
 42800  347

jQuery无缝轮播渐变

无缝轮播渐变 无缝轮播渐变
  幻灯片和轮播图
 41081  330

jQuery 3D旋转轮播插件Waterwheel Carousel

非常实用的3D轮播插件,兼容性良好,还可以自己扩展
  幻灯片和轮播图
 38027  354

讨论这个项目(41)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    锦绣芙蓉夜微澜 0
    2019/12/17 13:47:16
    dott的参数在哪里,设置会有小点出现哟 回复
    Wind 0
    2019/12/7 17:58:06
    手机端请问你们是怎么适配宽高的?它这个直接就定义了Li的宽高,但这样的问题是考虑到不同手机尺寸手机,图片宽度跟高度肯定不是固定的嘛!你们是怎么用的?
        BattleofLexington0
        2019/12/8 0:56:26

        现在只用添加meta标记就行了

        <!--适应移动端-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        Wind0
        2019/12/9 11:35:34
        这个不行啊,插件在CSS里面定义了图片的宽或高,考虑到不同手机的屏幕大小,宽跟高肯定都不能定死的;最好的方法就是能改成图片通过背景来调用,或者不需要固定图片的尺寸自动适应于屏幕!
        我改了一下目前没能实现!
        各位有没有更好的方案呢?
    回复
    此生不换 0
    2018/11/28 13:14:37
    请问下在depth模式下怎么调整图片大小?
    回复
    huoshen 0
    2018/11/7 16:25:00
    和swiper插件一样,都会在iphone6上出现卡顿 回复
    ?国民 0
    2018/10/10 10:47:10
    鼠标移入停止没?
    回复
    a逼c迪e诶扶鸡 0
    2018/9/11 15:02:23
    看看觉得可以! 回复
    danger soul 0
    2018/8/16 17:47:46
    风过无痕 0
    2018/6/12 10:14:22
    怎么插入背景音乐
        西瓜0
        2018/6/12 10:44:28
        <audio controls="controls" autoplay="autoplay">
         <source src="音乐地址.mp3" type="audio/mpeg" />
           您的浏览器不支持 audio 标签。
        </audio>
    回复
    Mrs.喵 0
    2017/11/9 9:05:46
    Madrigal~o~ 0
    2017/10/25 14:08:02

    要怎么样添加那个跟着图片走的小圆点

        独孤八剑1
        2018/6/27 7:21:04
        里面有个dott的参数,设置会有小点出现
        锦绣芙蓉夜微澜0
        2019/12/17 11:41:58
        如何配置的,可以发个代码吗
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复