jQuery插件Slider Revolution实现响应动画滑动图片切换效果
这是一款非常强大的内容切换插件,它基于jQuery,它充分响应,支持移动设备,支持手机触摸,键盘翻页;它内置幻灯、视频播放计时器,它拥有各种模式:自定义,自动响应,全屏;它有多种动画效果、3d效果...总之你想到的效果它都做到了,它的名字叫SliderRevolution。
HTML
SliderRevolution是一款基于jQuery的插件,使用它时需要先载入jQuery库文件,以及SliderRevolution依赖的css和js文件。
<scriptsrc="js/jquery.js"></script> <linkrel="stylesheet"href="css/style.css"media="screen"/> <scriptsrc="rs-plugin/js/jquery.themepunch.plugins.min.js"></script> <scriptsrc="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
内容切换的主体html结构如下,由div.tp-banner包含多个<li>标签,<li>中放置切换的内容,包括主要图片、文字、按钮信息。这些信息配上各自的data-属性,是为了让SliderRevolution识别。
<divclass="tp-banner-container"> <divclass="tp-banner"> <ul> <!--SLIDE--> <lidata-transition="fade"data-slotamount="7"data-masterspeed="1500"> <!--MAINIMAGE--> <imgsrc="images/bg1.jpg"alt="slidebg1"data-bgfit="cover"data-bgposition="lefttop"data-bgrepeat="no-repeat"> <!--LAYERS--> <!--LAYERNR.1--> <divclass="tp-captionlightgrey_dividerskewfromrightshortfadeout" data-x="85" data-y="224" data-speed="500" data-start="1200" data-easing="Power4.easeOut">MyCaption </div> ... </li> <lidata-transition="zoomout"data-slotamount="7"data-masterspeed="1000"> <!--MAINIMAGE--> <imgsrc="images/bg2.jpg"alt="darkblurbg"data-bgfit="cover"data-bgposition="lefttop"data-bgrepeat="no-repeat"> <!--LAYERS--> <!--LAYERNR.1--> <divclass="tp-captionlightgrey_dividerskewfromrightshortfadeout" data-x="85" data-y="224" data-speed="500" data-start="1200" data-easing="Power4.easeOut">MyCaption </div> ... </li> .... </ul> </div> </div>
jQuery调用
HTML结构布置好后,就可以调用SliderRevolution插件了,贴上以上代码后,打开浏览器就可以看到切换效果了。
$(function(){ $('.tp-banner').revolution({ delay:9000, startwidth:1170, startheight:500, hideThumbs:10 }); });
选项设置与说明
SliderRevolution提供了很多参数选项设置:
delay:滑动内容停留时间。默认9000毫秒
startheight:滑动内容高度,默认490像素。
startwidth:滑动内容宽度,默认890像素。
navigationType:显示翻页图标,默认“bullet”(圆点),如果设置为“none”则不显示。。
navigationArrows:显示翻页箭头,默认nexttobullets,即鼠标滑向时显示左右翻页箭头,如果设置为none则不显示。
touchenabled:是否允许触摸滑动,默认on即允许,如果设置为off则不允许。
onHoverStop:是否开启鼠标滑向时暂停,on:开启,off:关闭。
fullWidth:是否开启全屏展示图片内容,on:开启,off:关闭。
对于每个<li>标签可以设置各种效果:
data-transition:内容滑动效果,可以设置以下值:boxslide,boxfade,slotzoom-horizontal,slotslide-horizontal,slotfade-horizontal,slotzoom-vertical,slotslide-vertical,slotfade-vertical,curtain-1,curtain-2,curtain-3,slideleft,slideright,slideup,slidedown,fade
data-slotamount:切换时被分成的方形块数。
data-link:图片链接
data-delay:设置当前滑块内容的停留时间
对于每个li里面的元素,可以设置以下选项来实现各种效果。
动画样式,class属性:class属性值代表不同的动画样式:sft-ShortfromTopsfb-ShortfromBottom,sfr-ShortfromRight,sfl-ShortfromLeft,lft-LongfromTop,lfb-LongfromBottom,lfr-LongfromRight,lfl-LongfromLeft,fade-fading
data-x:当前元素相对li的横向位移
data-y:当前元素相对li的纵向位移
data-speed:动画时间,毫秒
data-startafter:当前元素等待几秒后再显示
data-easing:缓冲动画,有easeOutBack...多种动画效果,可参照jQueryEasing动画效果扩展
此外,如果要加上时间线作为一个定时器,可以在滑动内容的末尾加上以下代码:
<divclass="tp-bannertimer"></div>
以上所述就是本文的全部内容了,希望大家能够喜欢。