gridrotator.js响应式图片画廊插件

来源:https://www.sucaihuo.com/js/691.html 2016-01-20 19:37浏览(1542) 收藏

当你定义网格大小的时候,你要注意所有图片是否占满网格区域。比如你有50张图片,定义了4行5列,总共有20张图片在网格中显示,其它30张用来做图片随机翻转切换。gridrotator.js就是实现这种图片网格画廊效果。
gridrotator.js响应式图片画廊插件
分类:图片代码 > 网格 难易:高级
查看演示 下载资源: 167 下载资源 下载积分: 20 积分

图片列表代码

<div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow">
    <img class="ri-loading-image" src="images/loading.gif"/>
    <ul>
        <li><a href="http://www.sucaihuo.com/js/442.html" target="_blank" ><img src='images/medium/1.jpg'  title='jQuery圆角插件:jquery.corners.js'/></a></li>
        <li><a href="http://www.sucaihuo.com/js/443.html" target="_blank" ><img src='images/medium/2.jpg'  title='jQuery仿蜜淘在线客服'/></a></li>
        <li><a href="http://www.sucaihuo.com/js/444.html" target="_blank" ><img src='images/medium/3.jpg'  title='jQuery+turn.js翻书、文档和杂志'/></a></li>
        <li><a href="http://www.sucaihuo.com/js/445.html" target="_blank" ><img src='images/medium/4.jpg'  title='jCarousel演示7种不同的滚动切换'/></a></li>
    </ul>
</div>
<script type="text/javascript" src="js/jquery.gridrotator.js"></script>
$('#ri-grid').gridrotator({
    w1024: {rows: 3, columns: 8},
    w320: {rows: 2, columns: 4},
    w240: {rows: 2, columns: 3},
});

gridrotator.jsAPI教程

参数 描述 默认值
rows 行数 4
columns 列数 10
w1024 w1024 : { rows : 3, columns : 8 },屏幕宽度接近1024 -
w768 w768 : {rows : 3,columns : 7 }, -
w480 w480 : {rows : 3,columns : 5 }, -
w320 w320 : {rows : 2,columns : 4 }, -
w240 w240 : {rows : 2,columns : 3 }, -
step 翻转个数 random
maxStep 最多翻转个数 3
preventClick 禁止点击 true
animType 动画类型 random
animSpeed 动画速度 毫秒 800
interval 间隔时间 3000
slideshow 鼠标悬浮没有动画效果 true
onhover 鼠标悬浮不会切换 false
标签: 网格画廊 grid
评论1
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 3007547952

  • 头像 沙发
    02-01 15:06
    大***螺
    画廊效果大集合
1 2