jQuery插件滑块响应动画动画幻灯片切换效果
这是一款功能非常强大的内容转换插件,它是基于jQuery的,它充分响应,支持移动设备,手机触摸键盘的支持,翻转它;内置幻灯片,视频播放定时器,它有各种模式:自定义,自动响应,全屏;它有各种动画,3D…简言之,你会想到它的效果,它的名字是滑块旋转。HTML
滑块革命是一个基于jQuery的插件,需要加载到jQuery库文件和依赖于滑块旋转的CSS和js文件中。
内容的开关主HTML结构如下,其中由div.tp-banner多标签,和开关的内容放置,主要包括图片、文字、按钮的信息。这些信息是与各自的数据属性允许滑块革命要确定匹配。
<div class=TP字幕lightgrey_divider skewfromrightshort淡出
data-x =85
data-y =224
数据速度= 500
数据起始1200
数据缓解了=力。easeout>我的标题
…
<div class=TP字幕lightgrey_divider skewfromrightshort淡出
data-x =85
data-y =224
数据速度= 500
数据起始1200
数据缓解了=力。easeout>我的标题
…
的…
jQuery调用
当HTML结构被安排时,可以调用滑块革命插件。在附上上面的代码后,打开浏览器来查看开关的效果。
$(函数(){())
$(TP横幅)。
延迟时间:9000,
startwidth:1170,
startheight:500,
HideThumbs:10
});
});
选项设置和描述
滑块革命提供了许多参数选项设置:
Delay:滑动内容停留,默认为9000毫秒。
Startheight:把含量高,默认的490像素。
startwidth:把内容的宽度,默认为890像素。
NavigationType:网页显示图标和默认的子弹(点)是不是如果被设置为不显示。
NavigationArrows:网页显示箭头和默认的nexttobullets,即左、右箭头显示页面当鼠标滑,如果它被设置为无,它不显示。
如果touchenabled:允许滑动,默认是允许的,如果它是关闭的,这是不允许的。
OnHoverStop:如果鼠标滑下来,在打开,关闭:关闭。
是否全型:打开全屏显示画面内容,在打开,关闭:关闭。
可以为每个标签设置各种效果:
数据转换:滑动效果的内容,可以设置以下值:boxslide,boxfade,slotzoom水平,slotslide水平,slotfade slotzoom水平,垂直,slotslide垂直,slotfade垂直,curtain-1,curtain-2,curtain-3,slideleft,slideright,slideup slideDown,褪色,
广场分块数据slotamount:当开关。
数据链接:图片链接
数据延迟:设置当前滑块内容的停留时间
对于李中的每个元素,可以设置以下选项以实现各种效果。
动画风格,类属性:类属性值代表不同的动画风格:SFT短顶- SFB Short从底部,SFR短从右,SFL短左长,LFT的顶部,LFB Long从底层,LFR长从右长左,LFL,褪色褪色
data-x:当前元件相对于李的侧向位移
data-y:当前元素相对于李的纵向位移
数据速度:动画时间,毫秒
当前元素的数据开始后:等待几秒钟后显示
数据缓冲动画,与easeoutback放宽…多个动画效果,可以通过参考jQuery动画效果来扩展
另外,如果要向计时器添加时间线,可以在滑动内容的结尾添加以下代码。
以上是本文的全部内容,希望大家能喜欢。