在这款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效果时用来改变方向。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!