支持移动设备的响应式多功能jQuery幻灯片插件

admin
00
iView幻灯片插件简单易用,可以嵌入图片和视频,以及其它HTML元素,并且它可以制作图片标题的动画效果。可用它来制作幻灯片、banner轮播图、banner广告轮播图等等。该插件用jQuery代码将HTML转换为幻灯片,也可以通...

niuqiqi211028.jpg


iView幻灯片插件简单易用,可以嵌入图片和视频,以及其它HTML元素,并且它可以制作图片标题的动画效果。可用它来制作幻灯片、banner轮播图、banner广告轮播图等等。

该插件用jQuery代码将HTML转换为幻灯片,也可以通过定义HTML5 data属性来完成。这些标签都是有效的HTML5标签,并且对搜索引擎十分友好,利于SEO。

该幻灯片包含35种动画过渡效果,这些效果可以在所有的现代浏览器上工作,包括:ie6 - ie9, Firefox, Chrome, Opera, Safari,以及移动手机平台如 iOS 和 Android。

为了减少页面的加载时间,该幻灯片插件基于每一个slide进行图片预加载,图片只会在准备显示的时候才被加载。

该幻灯片插件的特点有:

  • 响应式设计

  • 支持IOS、Android 和其它移动触摸设备的触摸手势导航

  • 高度灵活和可定制性。

  • 高度的用户接口设计

  • 每一个slide都可以定制easing效果

  • 多语言支持

  • 35种可用的过渡效果

  • 支持多重过渡效果

  • 同一个HTML页面支持多个幻灯片实例

  • 可自定义每一个slide的超时时间

  • 可自定义图片标题的动画效果

  • 使用有效的HTML5标签,利于SEO

  • 带有图片预加载进度条

  • 支持键盘导航

  • 可设置为带缩略图模式

  • 可以自定义图片过渡的easing效果

  • 可以通过CSS文件方便的修改幻灯片的样式

  • 兼容所有的现代浏览器,包括:ie6 - ie9, Firefox, Chrome, Opera, Safari浏览器

下面是更多的可用的HTML5 data-attributes 属性。

属性接收值
data-transition动画过渡效果的类型可以是:"wipeLeft", "wipeRight", "wipeTop", "wipeBottom", "expandLeft", "expandRight", "expandTop", "expandBottom", "fade"
data-easing关于该属性的详细信息,可以参考http://jqueryui.com/easing/
data-speed过渡动画的持续时间,单位毫秒
data-x图片标题X轴的位置,单位像素
data-y图片标题Y轴的位置,单位像素
data-width图片标题的宽度,单位像素。如果不设置将使用源标题的宽度
data-height图片标题的高度,单位像素。如果不设置将使用源标题的高度


参数fx是设置幻灯片的效果,可取值有:

randomstrip-down-rightstrip-down-leftstrip-up-rightstrip-up-left
strip-up-downstrip-up-down-leftstrip-left-rightstrip-left-right-downslide-in-right
slide-in-leftslide-in-upslide-in-downleft-curtainright-curtain
top-curtainbottom-curtainfadeblock-randomblock-fade
block-fade-reverseblock-expandblock-expand-reverseblock-expand-randomblock-drop-random
zigzag-topzigzag-bottomzigzag-grow-topzigzag-grow-bottomzigzag-drop-top
zigzag-drop-bottomstrip-left-fadestrip-right-fadestrip-top-fadestrip-bottom-fade


授权方式:共享版

适合环境: Chrome/Firefox/Opera/Safari/IE9+

官方网站: 暂无

猜你喜欢