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.效果swirlFadeInswirlFadeOutrandomFadelinearPeallinearPealReversediagonalFadeblindbarsUpbarsDownblindFadeexplodeexplodeFancymixBarsmixBarsFancyfadeblindFadeReverseslideInslideInFancyslideLeftslideRightslideUpslideDownfallingBlindFaderaisingBlindFade相关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); } });

在线演示        积分下载        6毛下载        砍两刀下载