最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/ 沐浴春风 2016-01-20 19:37浏览(1628)

当你定义网格大小的时候,你要注意所有图片是否占满网格区域。比如你有50张图片,定义了4行5列,总共有20张图片在网格中显示,其它30张用来做图片随机翻转切换。gridrotator.js就是实现这种图片网格画廊效果。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

gridrotator.js响应式图片画廊插件
分类:图片代码 > 网格 难易:高级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 30 积分

图片列表代码

<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.erdangjiade.com/js/442.html" target="_blank" ><img src='images/medium/1.jpg'  title='jQuery圆角插件:jquery.corners.js'/></a></li>
        <li><a href="http://www.erdangjiade.com/js/443.html" target="_blank" ><img src='images/medium/2.jpg'  title='jQuery仿蜜淘在线客服'/></a></li>
        <li><a href="http://www.erdangjiade.com/js/444.html" target="_blank" ><img src='images/medium/3.jpg'  title='jQuery+turn.js翻书、文档和杂志'/></a></li>
        <li><a href="http://www.erdangjiade.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
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/691.html
评论1
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 沙发
    03-21 08:29
    ngu137
    响应式图片画廊插件真心不赖啊。。呵呵
1 2