A-A+

jquery Slider Revolution插件使用实例

2016年01月11日 web前端设计 暂无评论 阅读 8 views 次

Slider Revolution插件是一款非常强大的插件了,我们可以利用它来制作出各种效果并且还支持移动设备,支持手机触摸,键盘翻页;它内置幻灯、视频播放计时器等等效果,具体我们来看看。

jquery Slider Revolution插件使用实例这是一款非常强大的内容切换插件,它基于jQuery,它充分响应,支持移动设备,支持手机触摸,键盘翻页;它内置幻灯、视频播放计时器,它拥有各种模式:自定义,自动响应,全屏;它有多种动画效果、3d效果...总之你想到的效果它都做到了,它的名字叫Slider Revolution。

HTML:Slider Revolution是一款基于jQuery的插件,使用它时需要先载入jQuery库文件,以及Slider Revolution依赖的css和js文件。

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

内容切换的主体html结构如下,由div.tp-banner包含多个

  • 标签,
  • 中放置切换的内容,包括主要图片、文字、按钮信息。这些信息配上各自的data-属性,是为了让Slider Revolution识别。

    1. <div class="tp-banner-container">   
    2.     <div class="tp-banner" >   
    3.         <ul>   
    4.             <!-- SLIDE  -->   
    5.             <li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >   
    6.                 <!-- MAIN IMAGE -->   
    7.                 <img src="images/bg1.jpg"  alt="slidebg1"  data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">   
    8.                 <!-- LAYERS -->   
    9.                 <!-- LAYER NR. 1 -->   
    10.                 <div class="tp-caption lightgrey_divider skewfromrightshort fadeout"   
    11.                     data-x="85"   
    12.                     data-y="224"   
    13.                     data-speed="500"   
    14.                     data-start="1200"   
    15.                     data-easing="Power4.easeOut">My Caption   
    16.                 </div>   
    17.                 ...   
    18.    
    19.             </li>   
    20.             <li data-transition="zoomout" data-slotamount="7" data-masterspeed="1000" >   
    21.                 <!-- MAIN IMAGE -->   
    22.                 <img src="images/bg2.jpg"  alt="darkblurbg"  data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">   
    23.                 <!-- LAYERS -->   
    24.                 <!-- LAYER NR. 1 -->   
    25.                 <div class="tp-caption lightgrey_divider skewfromrightshort fadeout"   
    26.                     data-x="85"   
    27.                     data-y="224"   
    28.                     data-speed="500"   
    29.                     data-start="1200"   
    30.                     data-easing="Power4.easeOut">My Caption   
    31.                 </div>   
    32.                 ...   
    33.             </li>   
    34.             ....   
    35.         </ul>   
    36.     </div>   
    37. </div>  

    jQuery调用

    HTML结构布置好后,就可以调用Slider Revolution插件了,贴上以上代码后,打开浏览器就可以看到切换效果了。

    1. $(function() {   
    2.     $('.tp-banner').revolution({   
    3.         delay:9000,   
    4.         startwidth:1170,   
    5.         startheight:500,   
    6.         hideThumbs:10   
    7.     });   
    8. });   

    选项设置与说明

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

    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 - 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...多种动画效果,

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

    1. <div class="tp-bannertimer"></div>   
  • 标签:

    给我留言