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

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 属性。

调用插件

在页面加载完毕之后，就可以通过下面的方法来抵用该幻灯片插件。

<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是设置幻灯片的效果，可取值有：

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-属性：

方法

幻灯片的暂停和播放：

$('#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
});