Quake SliderjQuery图像内容滑块插件

使用滑块是一个非常有效的方法来展示你的工作,投资组合和任何你想要你的访客的注意。滑块通常放置在符合用户集中的地方。如头部区域,是第一个地方用户的关注。
滑块不仅是展示你的网站,也可以帮助提高用户在你的网站上停留的时间。

配置
frameWidth: Width of Slider, default value 990.
frameHeight: Height of Slider, default value 306.
animationSpeed: No of milliseconds animation takes to complete, default value 500.
pauseTime: Delay in milliseconds between each slide, default value 4000.
rows: Determine the size of slices, for greater values slices are smaller, default value 4.
cols: Determins the size of slices, for greater value slices are smaller, default value 12.
thumbnails: To display/hide thumbnails, default value true.
effects: List of effects to be applied, you can pass any no of effects from the available list e.g. ['swirlFadeIn','explode'].
nextText: Default text for next button, default value ‘Next.
prevText: Default text for previous button, default value ‘Prev’.
hasNextPrev: Toggles next/prev controls, default value true.
captionOpacity: Opacity for captions, default value 0.5.
captionOrientations: Caption placement, can be either ‘right’, ‘left’, ‘top’, ‘bottom’ or all, default value ‘right’.
captionAnimationSpeed: Animation speed for captions, default value 1000.
thumbnailsPath: Location for thumbnails e.g. ‘images/thumbs’. each thumbnail image name must correspond to related image.
captionsSetup: Configurations for captions to control every aspect of captions, default value null.

效果
swirlFadeIn
swirlFadeOut
randomFade
linearPeal
linearPealReverse
diagonalFade
blind
barsUp
barsDown
blindFade
explode
explodeFancy
mixBars
mixBarsFancy
fade
blindFadeReverse
slideIn
slideInFancy
slideLeft
slideRight
slideUp
slideDown
fallingBlindFade
raisingBlindFade

相关js
$(document).ready(function () {
           $('.quake-slider').quake({ effects: ['swirlFadeIn', 'swirlFadeOut', 'swirlFadeIn', 'linearPealReverse', 'slideIn', 'swirlFadeIn', 'explodeFancy'],
               thumbnails: true,
               captionOpacity: '0.3',
               captionsSetup: [
                                {
                                    "orientation": "bottom",
                                    "slides": [0, 1, 2],
                                    "callback": captionAnimateCallback
                                },
                                 {
                                     "orientation": "top",
                                     "slides": [3, 4],
                                     "callback": captionAnimateCallback
                                 }
                                 ,
                                 {
                                     "orientation": "left",
                                     "slides": [5, 6],
                                     "callback": captionAnimationCallback1
                                 }
                                 ,
                                 {
                                     "orientation": "right",
                                     "slides": [7, 8],
                                     "callback": captionAnimationCallback1
                                 }
                               ]
 
           });
 
           function captionAnimateCallback(captionWrapper, captionContainer, orientation) {
               captionWrapper.css({ left: '-990px' }).stop(true, true).animate({ left: 0 }, 500);
               captionContainer.css({ left: '-990px' }).stop(true, true).animate({ left: 0 }, 500);
           }
           function captionAnimationCallback1(captionWrapper, captionContainer, orientation) {
               captionWrapper.css({ top: '-330px' }).stop(true, true).animate({ top: 0 }, 500);
               captionContainer.css({ top: '-330px' }).stop(true, true).animate({ top: 0 }, 500);
           }
 
       });