PC和移动端常用轮播或滑动组件整理
[ 2017/09/09, JavaScript , 6864阅, 0评 ]

1.SuperSlide(PC)/TouchSlide(移动端)

SuperSlide基于jQuery插件,致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决!还可以多个SuperSlide组合创造更多效果,兼容包括ie6的绝大部分浏览器。

TouchSlide是纯javascript打造的触屏滑动特效插件,面向手机、平板电脑等移动终端,能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

SuperSlide/TouchSlide官网

2.iSlider

iSlider是一个表现出众,无任何插件依赖的手机平台javascript滑动组件。它能够处理任何元素,例如图片或者DOM元素。是百度团队开发完成的。同时iSlider也是目前最 轻量、高性能的移动滑动方案。

  • 图片和dom 两种类型滑动,图片的类型很适合读图类的app,dom 类型则可以根据需要配置成各式各样的webapp
  • 自定义的事件回调,你可以在滑动中,滑动结束,或是滑动开始绑定自己的事件回调
  • 可配置的滑动动画,在获得高性能的同时,你仍然可以指定一些特殊的高级的动画效果来完成你的app,iSlider 提供3d,flip,depth等动画方式来丰富你的滑动效果。
  • iSlider 会帮你处理好屏幕旋转事件,你只要考虑的是,屏幕旋转后,你的dom 或是 图片改如何显示。
  • iSlider 还有一些小功能,比如滑动边界递减,自动滑动,垂直水平滑动可配置。
  • iSlider 的依赖:iSlider 不依赖任何库或是框架,你可以很轻松的把他用在自己的项目中,不会和zepto 或是jqmobi 冲突。
  • 体积大小:iSlider压缩后代码不超过10KB,你可以很随意的打包在你的项目中。
  • 性能上:iSlider借助了手机硬件加速,所有的动画都尽可能重用dom ,并且使用尽可能少dom 来完成整个渲染,支持无尽的滚动,并且在手指快速滑动中也达到流畅的体验。

iSlider.GitHub / demo&API

3.Swiper

Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架,使用硬件加速过渡(如果该设备支持的话)。主要使用于移动端的网站、移动web apps,native apps和hybrid apps。主要是为IOS而设计的,同时,在Android、WP8系统也有着良好的用户体验,Swiper从3.0开始不再全面支持PC端。因此,如需在PC上兼容更多的浏览器,可以选择Swiper2.x(甚至支持IE7)。

angularjs的angular-swiper插件即是基于Swiper而成。

Swiper官网 / Swiper中文网 / Swiper.GitHub

有朋自远方来...评论一下呗O(∩_∩)O