当前位置主页 > 资料库 > 前端教程 > 使用jQuery制作响应式图片展示画廊 | jQuery教程

使用jQuery制作响应式图片展示画廊 | jQuery教程

2014-10-25

查看演示 下载地址

本教程将和大家分享一个jQuery响应式图片展示画廊效果。这种效果将屏幕每行分为许多格子,每个格子中放置一张图片,然后随机的翻转其中一些格子的图片,已达到翻转图片的效果。

HTML结构:

HTML结构非常简单。

<div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow">
    <ul>
        <li><a href="#"><img src="images/medium/1.jpg" alt="Whatever works"/></a></li>
        <li><a href="#"><img src="images/medium/2.jpg" alt="Anything else"/></a></li>
        <!-- ... -->
    </ul>
</div>
                            

调用插件

$(function() {         
    $( '#ri-grid' ).gridrotator();
});
                            

注意别忘了引入jQuery和jquery.gridrotator.js文件。

可选参数

// number of rows
rows            : 4,

// number of columns 
columns         : 10,

// rows/columns for different screen widths
// i.e. w768 is for screens smaller than 768 pixels
w1024           : {
    rows    : 3,
    columns : 8
},

w768            : {
    rows    : 3,
    columns : 7
},

w480            : {
    rows    : 3,
    columns : 5
},

w320            : {
    rows    : 2,
    columns : 4
},

w240            : {
    rows    : 2,
    columns : 3
},

// step: number of items that are replaced at the same time
// random || [some number]
// note: for performance issues, the number should not be > options.maxStep
step            : 'random',
maxStep         : 3,

// prevent user to click the items
preventClick    : true,

// animation type
// showHide || fadeInOut || slideLeft || 
// slideRight || slideTop || slideBottom || 
// rotateLeft || rotateRight || rotateTop || 
// rotateBottom || scale || rotate3d || 
// rotateLeftScale || rotateRightScale || 
// rotateTopScale || rotateBottomScale || random
animType        : 'random',

// animation speed
animSpeed       : 500,

// animation easings
animEasingOut   : 'linear',
animEasingIn    : 'linear',

// the item(s) will be replaced every 3 seconds
// note: for performance issues, the time "can't" be < 300 ms
interval        : 3000,
// if false the animations will not start
// use false if onhover is true for example
slideshow       : true,
// if true the items will switch when hovered
onhover     : false,
// ids of elements that shouldn't change
nochange        : []
                            

当你定义网格大小的时候,你要注意的是不是所有的图片都会在网格中立刻显示。举个例子,你有50张图片,定义了4行5列,那么会有20张图片在网格中显示,其它30张用来做图片翻转切换。

教程就到这里,希望对你有所帮助。

查看演示 下载地址

Previous:
上一篇:YouTube网站侧边栏导航菜单的制作方法 | CSS3教程
Next:
下一篇:使用jQuery.StackSlider有趣的3d翻转图片展示效果 | jQuery教程
返回顶部