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动画效果来扩展

另外,如果要向计时器添加时间线,可以在滑动内容的结尾添加以下代码。








以上是本文的全部内容,希望大家能喜欢。