网站建设资讯

NEWS

网站建设资讯

SliderRevolution实现幻灯片-创新互联

Slider Revolution实现幻灯片

创新互联主营南雄网站建设的网络公司,主营网站建设方案,App定制开发,南雄h5小程序定制开发搭建,南雄网站营销推广欢迎南雄等地区企业咨询

Slider Revolution基于jQuery,它充分响应,支持移动设备,支持手机触摸,键盘翻页;它内置幻灯、视频播放计时器,它拥有各种模式:自定义,自动响应,全屏;它有多种动画效果、3d效果。

下面介绍使用步骤:

1,引入需要使用的文件如下:

1

2

3

4

2.在body部分定义主体html结构如下:

  • 1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    • slidebg1

      data-x="85"

      data-y="224"

      data-speed="500"

      data-start="1200"

      data-easing="Power4.easeOut">My Caption

      ...

    • darkblurbg

      data-x="85"

      data-y="224"

      data-speed="500"

      data-start="1200"

      data-easing="Power4.easeOut">My Caption

      ...

    • ....

    3。调用Slider Revolution:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    $(function() {

    $('.tp-banner').revolution({

    delay:9000,

    startwidth:1170,

    startheight:500,

    hideThumbs:10

    });

    });

    选项设置与说明

    Slider Revolution提供了很多参数选项设置:

    delay: 滑动内容停留时间。默认9000毫秒

    startheight: 滑动内容高度,默认490像素。

    startwidth: 滑动内容宽度,默认890像素。

    navigationType: 显示翻页图标,默认“bullet”(圆点),如果设置为“none”则不显示。。

    navigationArrows: 显示翻页箭头,默认nexttobullets,即鼠标滑向时显示左右翻页箭头,如果设置为none则不显示。

    touchenabled: 是否允许触摸滑动,默认on即允许,如果设置为off则不允许。

    onHoverStop: 是否开启鼠标滑向时暂停,on:开启,off:关闭。

    fullWidth: 是否开启全屏展示图片内容,on:开启,off:关闭。

    对于每个

  • 标签可以设置各种效果:

    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 - Short from Top sfb - Short from Bottom,sfr - Short from Right,sfl - Short from Left,lft - Long from Top,lfb - Long from Bottom,lfr - Long from Right,lfl - Long from Left,fade - fading

    data-x: 当前元素相对li的横向位移

    data-y : 当前元素相对li的纵向位移

    data-speed: 动画时间,毫秒

    data-start after: 当前元素等待几秒后再显示

    data-easing: 缓冲动画,有easeOutBack...多种动画效果,可参照jQuery Easing 动画效果扩展

    此外,如果要加上时间线作为一个定时器,可以在滑动内容的末尾加上以下代码:

    1

    2

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


分享名称:SliderRevolution实现幻灯片-创新互联
文章来源:http://njwzjz.com/article/phicc.html