Slider Revolution实现幻灯片

老胡不胖 发布于 2015/11/24 10:42
阅读 1K+
收藏 0

dd

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

下面介绍使用步骤:

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

1
2
3
4
<script src="js/jquery.js"></script>
<link rel="stylesheet" href="css/style.css" media="screen" />
<script src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>

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
    <div class="tp-banner-container">
    <div class="tp-banner" >
    <ul>
    <!-- SLIDE -->
    <li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >
    <!-- MAIN IMAGE -->
    <img src="images/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
    <!-- LAYERS -->
    <!-- LAYER NR. 1 -->
    <div class="tp-caption lightgrey_divider skewfromrightshort fadeout"
    data-x="85"
    data-y="224"
    data-speed="500"
    data-start="1200"
    data-easing="Power4.easeOut">My Caption
    </div>
    ...
    </li>
    <li data-transition="zoomout" data-slotamount="7" data-masterspeed="1000" >
    <!-- MAIN IMAGE -->
    <img src="images/bg2.jpg" alt="darkblurbg" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
    <!-- LAYERS -->
    <!-- LAYER NR. 1 -->
    <div class="tp-caption lightgrey_divider skewfromrightshort fadeout"
    data-x="85"
    data-y="224"
    data-speed="500"
    data-start="1200"
    data-easing="Power4.easeOut">My Caption
    </div>
    ...
    </li>
    ....
    </ul>
    </div>
    </div>

     

    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
    <div class="tp-bannertimer"></div>

 

加载中
返回顶部
顶部