jQuery图片切换插件Grid Navigation Effects

使用方法：

引用CSS样式文件

<link rel="stylesheet" type="text/css" href="css/gridNavigation.css" />

引入jQuery库文件、插件JS文件

<script src="http://libs.baidu.com/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.gridnav.js"></script>

插件初始化、参数配置

$(function() {
	$('#tj_container').gridnav({
		rows	: 2,
		type	: {
			mode		: 'sequpdown', 		// use def | fade | seqfade | updown | sequpdown | showhide | disperse | rows
			speed		: 500,				// for fade, seqfade, updown, sequpdown, showhide, disperse, rows
			easing		: '',				// for fade, seqfade, updown, sequpdown, showhide, disperse, rows	
			factor		: 50,				// for seqfade, sequpdown, rows
			reverse		: false				// for sequpdown
		}
	});
});

HTML部分

<div id="tj_container" class="tj_container">
  <div class="tj_nav">
      <span id="tj_prev" class="tj_prev">Previous</span>
      <span id="tj_next" class="tj_next">Next</span>
  </div>
  <div class="tj_wrapper">
      <ul class="tj_gallery">
          <li><a href="#"><img src="images/1.jpg" alt="image01" /></a></li>
          <li><a href="#"><img src="images/2.jpg" alt="image02" /></a></li>
          <li><a href="#"><img src="images/3.jpg" alt="image03" /></a></li>
          <li><a href="#"><img src="images/4.jpg" alt="image04" /></a></li>
          <li><a href="#"><img src="images/5.jpg" alt="image05" /></a></li>
          <li><a href="#"><img src="images/6.jpg" alt="image06" /></a></li>
          <li><a href="#"><img src="images/7.jpg" alt="image07" /></a></li>
          <li><a href="#"><img src="images/8.jpg" alt="image08" /></a></li>
          <li><a href="#"><img src="images/9.jpg" alt="image09" /></a></li>
          <li><a href="#"><img src="images/10.jpg" alt="image10" /></a></li>
          <li><a href="#"><img src="images/11.jpg" alt="image11" /></a></li>
          <li><a href="#"><img src="images/12.jpg" alt="image12" /></a></li>
          <li><a href="#"><img src="images/13.jpg" alt="image13" /></a></li>
          <li><a href="#"><img src="images/14.jpg" alt="image14" /></a></li>
          <li><a href="#"><img src="images/15.jpg" alt="image15" /></a></li>
          <li><a href="#"><img src="images/16.jpg" alt="image16" /></a></li>
          <li><a href="#"><img src="images/17.jpg" alt="image17" /></a></li>
          <li><a href="#"><img src="images/18.jpg" alt="image18" /></a></li>
          <li><a href="#"><img src="images/19.jpg" alt="image19" /></a></li>
          <li><a href="#"><img src="images/20.jpg" alt="image20" /></a></li>
      </ul>
  </div>
</div>

参数说明：

• rows: the number of rows to be shown in the grid（行数）

• navL/navR: the selectors for the previous and next navigation elements（上下箭头）

• mode: the type of animation; you can use def | fade | seqfade | updown | sequpdown | showhide | disperse | rows（效果类型）

• speed: the speed of the animation for fade, seqfade, updown, sequpdown, showhide, disperse, rows（播放速度）

• easing: the easing effect for fade, seqfade, updown, sequpdown, showhide, disperse, rows

• factor: delay between each item animation for seqfade, sequpdown; amount of pixels the row move when using rows

• reverse: for reversing the order when using sequpdown