gridSlide是一款很酷的jQuery网格式多方向图片幻灯片插件。该幻灯片插件适用于显示多图片的场合，它会根据缩略图的位置在显示幻灯片时做相应的方向运动。

使用方法

HTML结构

该幻灯片插件的每一组图片都使用一个无序列表来包装，所有的图片都包裹在一个class为slider的div中。#slider-nav是用于放置缩略图的容器。

<div class="slider">
  <ul data-title="Row 1">
    <li><img src="img/img1-1.jpg" alt="image"></li>
    ...
  </ul>
  <ul data-title="Row 2">
    <li><img src="img/img2-1.jpg" alt="image"></li>
    ...
  </ul>
  <ul data-title="Row 3">
    <li><img src="img/img3-1.jpg" alt="image"></li>
    ...
  </ul>
</div>
<div id="slider-nav"></div>
    

调用插件

$(window).load(function() {
    $('.slider').gridSlide();
});
    

可用参数

该幻灯片插件有几个可用的参数：

nav: '#slider-nav',
menu: 'grid',
title: false,
imgGrid: false,
speed: 300      
    

• nav：用于显示到后缩略图的容器。该参数接受一个选择权字符串。

  $('.slider').gridslide({
      nav: '.another-div'
  });        
        

• menu：该参数可以设置为"grid"或"nav"。"grid"设置导航缩略图为网格缩略图的形式；"nav"设置导航为上下左右四个方向的控制图。
• title：该选项允许你在使用导航缩略图"grid"模式时，指定每行缩略图的标题。你也可以在每个ul元素上使用data-title属性来指定标题。插件会在每行缩略图中添加一个h3标题。
• imgGrid：imgGrid further extends the grid menu option by making the grid feature the images that you've included in the slider。
• speed：切换幻灯片的速度。可以设置为Slow, Fast 或一个毫秒数。

更多关于该幻灯片插件的信息可以参考：www.dpurdy.me/plugins/gridslide

在线预览    源码下载