图片/图形

网格图片切换jQuery效果

阿里云


这是一款 jQuery 图片切换展示插件。在这款 jquery 图片切换效果中,图片以网格方式排列,通过点击导航按钮,可以以不同的效果切换图片,有淡入淡出、滑动等等效果。

HTML 代码

  1. <div id="tj_container" class="tj_container">
  2.   <div class="tj_nav">
  3.     <span id="tj_prev" class="tj_prev">Previous</span>
  4.     <span id="tj_next" class="tj_next">Next</span>
  5.   </div>
  6.   <div class="tj_wrapper">
  7.     <ul class="tj_gallery">
  8.       <li><a href="#"><img src="images/1.jpg" alt="image01" /></a></li>
  9.       ......
  10.     </ul>
  11.   </div>
  12. </div>
也想出现在这里?联系我们
创客主机

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

  1. $('#tj_container').gridnav({
  2.     rows    : 2,
  3.     navL    : '#tj_prev',
  4.     navR    : '#tj_next',
  5.     type    : {
  6.         mode        : 'sequpdown',  
  7.         speed       : 400,          
  8.         easing      : '',           
  9.         factor      : 50,           
  10.         reverse     : false       
  11.     }
  12. });

可用参数:

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 效果时用来改变方向

网格图片切换 jQuery 效果

已有 453 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!