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
});