iView是一款效果非常炫酷的支持移动设备的响应式多功能jQuery幻灯片插件。该幻灯片插件简单易用,可以嵌入图片和视频,以及其它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浏览器
使用方法
使用该幻灯片插件之前首先要引入必要的依赖文件。
<link rel="stylesheet" href="iview.css" type="text/css" media="screen" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script> <script src="raphael-min.js" type="text/javascript"></script> <script src="jquery.easing.js" type="text/javascript"></script> <script src="iview.packed.js" type="text/javascript"></script>
HTML结构
该幻灯片插件使用的是嵌套的<div>
结构。
<div id="iview"> <!-- Slide 1 --> <div data-iview:thumbnail="photos/photo1_thumb.jpg" data-iview:image="photos/photo1.jpg"></div> <!-- Slide 2 --> <div data-iview:thumbnail="photos/photo2_thumb.jpg" data-iview:image="photos/photo2.jpg"></div> </div>
你也可以为每一张图片添加一个标题,你只需要在每个图片<div>
中添加一个带class为iview-caption
的<div>
元素即可。
<div id="iview"> <!-- Slide 1 --> <div data-iview:thumbnail="photos/photo1_thumb.jpg" data-iview:image="photos/photo1.jpg"> <!-- Caption --> <div class="iview-caption" data-x="0" data-y="0" data-width="400" data-height="300" data-transition="wipeRight" data-speed="700"><h3>The Responsive Caption</h3>This is the product that you <b><i>all have been waiting for</b></i>!<br><br>Customize this slider with just a little HTML and CSS to your very needs. Give each slider some captions to transport your message.<br><br>All in all it works on every browser (including IE6 / 7 / 8) and on iOS and Android devices!</div> </div> <!-- Slide 2 --> <div data-iview:thumbnail="photos/photo2_thumb.jpg" data-iview:image="photos/photo2.jpg"> <!-- Caption --> <div class="iview-caption" data-x="70" data-y="70" data-transition="expandLeft">Caption Description</div> </div> </div>
如果你添加了多个图片标题到iview-caption
DIV中,你可以决定每一个图片标题的动画效果。可用的动画效果有:"wipeLeft", "wipeRight", "wipeTop", "wipeBottom", expandLeft
, expandRight
, expandTop
, expandBottom
, fade
。
<div class="iview-caption" data-transition="fade">Caption description</div>
下面是更多的可用的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 | 图片标题的高度,单位像素。如果不设置将使用源标题的高度 |
调用插件
在页面加载完毕之后,就可以通过下面的方法来抵用该幻灯片插件。
<script type="text/javascript"> $(document).ready(function() { $('#slider').iView(); }); </script>
配置参数
下面是该幻灯片插件的默认参数。
$(document).ready(function() { $('#slider').iView({ fx: 'random', // Specify sets like: 'left-curtain,fade,zigzag-top,strip-left-fade' easing: 'easeOutQuad', // for the complete list http://jqueryui.com/demos/effect/easing.html strips: 20, // Number of strips for strip animations blockCols: 10, // Number of block columns for block animations blockRows: 5, // Number of block rows for block animations captionSpeed: 500, // Caption transition speed captionEasing: 'easeInOutSine', // Caption transition easing effect captionOpacity: 1, // Caption opacity animationSpeed: 500, // Slide transition speed pauseTime: 5000, // How long each slide will show startSlide: 0, // Set starting Slide (0 index) directionNav: true, // Next & Previous navigation directionNavHoverOpacity: 0.6, // Fade on hover controlNav: true, // 1,2,3,4... navigation controlNavNextPrev: true, // previous,next navigation controlNavHoverOpacity: 0.6, // Navigation fade on hover controlNavThumbs: false, // Show thumbs navigation controlNavTooltip: true, // Show tooltip image previewer autoAdvance: true, // Force auto transitions keyboardNav: true, // Use left & right arrows touchNav: true, // Use Touch swipe to change slides pauseOnHover: false, // Stop slider while hovering nextLabel: "Next", // To set the string of the next button (Multilanguage use) previousLabel: "Previous", // To set the string of the previous button (Multilanguage use) playLabel: "Play", // To set the string of the play button (Multilanguage use) pauseLabel: "Pause", // To set the string of the pause button (Multilanguage use) closeLabel: "Close", // To set the string of the close button (Multilanguage use) randomStart: false, // Start on a random slide timer: 'Pie', // Timer style: "Pie", "360Bar" or "Bar" timerBg: '#000', // Timer background timerColor: '#EEE', // Timer color timerOpacity: 0.5, // Timer opacity timerDiameter: 30, // Timer diameter timerPadding: 4, // Timer padding timerStroke: 3, // Timer stroke width timerBarStroke: 1, // Timer Bar stroke width timerBarStrokeColor: '#EEE', // Timer Bar stroke color timerBarStrokeStyle: 'solid', // Timer Bar stroke style timerX: 10, // Timer X position threshold timerY: 10, // Timer Y position threshold tooltipX: 5, // Tooltip X position threshold tooltipY: -5, // Tooltip Y position threshold onBeforeChange: function(){}, // Triggers before a slide transition onAfterChange: function(){}, // Triggers after a slide transition onSlideshowEnd: function(){}, // Triggers after all slides have been shown onLastSlide: function(){}, // Triggers when last slide is shown onAfterLoad: function(){}, // Triggers when slider has loaded onPause: function(){}, // Triggers when slider has paused onPlay: function(){} // Triggers when slider has played }); });
上面的第一个参数fx
是设置幻灯片的效果,可取值有:
random | strip-down-right | strip-down-left | strip-up-right | strip-up-left |
strip-up-down | strip-up-down-left | strip-left-right | strip-left-right-down | slide-in-right |
slide-in-left | slide-in-up | slide-in-down | left-curtain | right-curtain |
top-curtain | bottom-curtain | fade | block-random | block-fade |
block-fade-reverse | block-expand | block-expand-reverse | block-expand-random | block-drop-random |
zigzag-top | zigzag-bottom | zigzag-grow-top | zigzag-grow-bottom | zigzag-drop-top |
zigzag-drop-bottom | strip-left-fade | strip-right-fade | strip-top-fade | strip-bottom-fade |
HTML5 data属性
该幻灯片插件的图片URL使用的是 HTML5 data-
属性,这将允许我们只在准备显示图片的时候才加载图片(懒加载)。
通过HTML5 data-
属性你还可以添加其它的属性到幻灯片上。例如添加缩略图的URL:
<div data-iview:thumbnail="photos/photo1_thumb.jpg" data-iview:image="photos/photo1.jpg"></div>
或者为幻灯片添加过渡动画效果:
<div data-iview:image="photos/photo1.jpg" data-iview:transition="zigzag-top"></div>
你也可以设置一个随机的动画过渡效果:
<div data-iview:image="photos/photo1.jpg" data-iview:transition="zigzag-top,top-curtain,fade"></div>
下面是该幻灯片插件所用可用的data-
属性:
属性 | 接收值 |
data-iview:transition | 动画过渡效果可以接收的值有: "strip-down-right", "strip-down-left", "strip-up-right", "strip-up-left", "strip-up-down", "strip-up-down-left", "strip-left-right", "strip-left-right-down", "slide-in-right", "slide-in-left", "slide-in-up", "slide-in-down", "left-curtain", "right-curtain", "top-curtain", "bottom-curtain", "fade", "block-random", "block-fade", "block-fade-reverse", "block-expand", "block-expand-reverse", "block-expand-random", "block-drop-random", "zigzag-top", "zigzag-bottom", "zigzag-grow-top", "zigzag-grow-bottom", "zigzag-drop-top", "zigzag-drop-bottom", "strip-left-fade", "strip-right-fade", "strip-top-fade", "strip-bottom-fade" |
data-iview:easing | 可以参考http://jqueryui.com/easing/ |
data-iview:image | 幻灯片图片保存的地址URL |
data-iview:thumbnail | 幻灯片图片缩略图保存的地址URL(如果controlNavThumbs 设置为true ) |
data-iview:pausetime | 一个slide结束到另一个slide开始的时间,单位毫秒 |
data-iview:type | 幻灯片的类型,设置为video就该slide就用于视频播放 |
方法
幻灯片的暂停和播放:
$('#slider').trigger('iView:pause'); //Stop the Slider $('#slider').trigger('iView:play'); //Start the Slider
手动改变幻灯片:
$('#slider').trigger('iView:goSlide', [2]); //Go to slide 2
前一个和下一个幻灯片:
$('#slider').trigger('iView:previous'); //Go to previous slide $('#slider').trigger('iView:next'); //Go to next slide
设置幻灯片随机开始播放:
var total = $('#slider').children().length; var rand = Math.floor(Math.random()*total); $('#slider').iView({ startSlide:rand });