jQuery网格图片切换效果_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

在这款jQuery网格图片切换插件中共展示了10种不同效果的图片切换效果。插件中使用的精美图片来自于唯唯小站-花瓣

在插件演示中你可以使用鼠标来滚动图片，一样可以看到效果。

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>
      ......
    </ul>
  </div>
</div>

以下是move/fade效果的调用方法。

$('#tj_container').gridnav({
    rows    : 2,
    navL    : '#tj_prev',
    navR    : '#tj_next',
    type    : {
        mode        : 'sequpdown',  
        speed       : 400,          
        easing      : '',           
        factor      : 50,           
        reverse     : false        
    }
});

可用参数：

rows: 每行显示多少个网格。
navL/navR: “前一个”和“后一个”元素的选择器。
mode: 动画类型。可选类型有：def | fade | seqfade | updown | sequpdown | showhide | disperse | rows
speed: fade, seqfade, updown, sequpdown, showhide, disperse, rows这些动画的速度。
easing: fade, seqfade, updown, sequpdown, showhide, disperse, rows的easing效果。
factor: seqfade和sequpdown的动画延时。如果使用rows效果则是每行的移动像素。
reverse: 当使用sequpdown效果时用来改变方向。