Slider Revolution演示全屏内容切换动画效果

来源:https://www.sucaihuo.com/js/149.html 2015-06-10 05:14浏览(10569) 收藏

这是一款非常强大的内容切换插件,它基于jQuery,它充分响应,支持移动设备,支持手机触摸,键盘翻页;它内置幻灯、视频播放计时器,它拥有各种模式:自定义,自动响应,全屏;它有多种动画效果、3d效果
Slider Revolution演示全屏内容切换动画效果
分类:图片代码 > 图片轮播 难易:高级
查看演示 下载资源 下载积分: 20 积分

HTML

首先我们引入jQuerh库和Slider Revolution插件

<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>

我们放置了两个<li>标签,<li>中放置切换的内容,包括主要图片、文字、按钮等属性设置。

<ul>
    <!-- SLIDE  -->
    <li  data-transition="slideleft" data-slotamount="14">
        <!-- MAIN IMAGE -->
        <img src="images/bg1.jpg" alt="Rev Full">
        <div class="caption sfb" data-x="693" data-y="75" data-speed="700" data-start="0"data-easing="easeOutBack">
            <img src="images/mobile.png" alt=""/>
        </div>

        <div class="tp-caption slider-text-title sft str" data-x="20" data-y="150" data-speed="300" data-start="800" data-easing="easeOutCubic" data-end="6000" data-endspeed="500" style="font-size:24px">标题1</div>


        <div class="tp-caption slider-text-description sft str"  data-x="20" data-y="200" data-start="1000" data-easing="easeOutBack" data-end="4500" data-endspeed="500">
            Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin,<br /> 
            lorem quis bibendum auctor, nisi elit consequat ipsum, nec <br />
            sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate
        </div>
        <div class="tp-caption slider-text-description sft str"  data-x="20" data-y="280" data-start="1500" data-easing="easeOutBack" data-end="5000" data-endspeed="500">
            <a href="#" class="button btn-flat">More Info</a>
        </div>   
    </li>
    <!-- SLIDE  -->
    <li data-transition="boxslide" data-slotamount="7" data-masterspeed="300" >
        <!-- MAIN IMAGE -->
        <img src="images/bg2.jpg"  alt="darkblurbg"   data-fullwidthcentering="on">
        <!-- LAYERS -->
        <div class="tp-caption lft stb stl"
             data-x="650"
             data-y="93"
             data-speed="500"
             data-start="500"
             data-easing="easeOutExpo" data-end="6000" data-endspeed="500"><img src="images/imac.png" alt="Image 1"></div>

        <div class="tp-caption lfb stb stl"
             data-x="616"
             data-y="194"
             data-speed="500"
             data-start="700"
             data-easing="easeOutExpo" data-end="6000" data-endspeed="500"><img src="images/ipad.png" alt="Image 1"></div>

        <div class="tp-caption lfr stb stl"
             data-x="751"
             data-y="290"
             data-speed="1000"
             data-start="1000"
             data-easing="easeOutExpo" data-end="6000" data-endspeed="500"><img src="images/iphone.png" alt="Image 1"></div>

        <div class="tp-caption slider-text-title sft str"
             data-x="20"
             data-y="150"
             data-speed="300"
             data-start="800"
             data-easing="easeOutCubic" data-end="6000" data-endspeed="500" style="font-size:24px">标题2</div>


        <div class="tp-caption slider-text-description sft str"  data-x="20" data-y="200" data-start="1000" data-easing="easeOutBack" data-end="4500" data-endspeed="500">
            Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin,<br /> 
            lorem quis bibendum auctor, nisi elit consequat ipsum, nec <br />
            sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate
        </div>
        <div class="tp-caption slider-text-description sft str"  data-x="20" data-y="280" data-start="1500" data-easing="easeOutBack" data-end="5000" data-endspeed="500">
            <a href="#" class="button btn-flat">More Info</a>
        </div>  
    </li>
</ul>

jQuery

调用Slider Revolution非常简单:

$(function() { 
    $('.tp-banner').revolution({ 
        delay:8500,  //滑动内容停留时间
        startwidth:1020, //滑动内容宽度
        startheight:400, 
        hideThumbs:8
    }); 
});

提示:若startheight设置为500,那么.tp-banner-container也要设置相同高度,且要overflow:hidden。即让超过500px的图片给遮住。

参数 描述 默认值
navigationType 显示翻页图标,如果设置为“none”则不显示。 “bullet”(圆点)
navigationArrows 显示翻页箭头,默认nexttobullets,即鼠标滑向时显示左右翻页箭头,如果设置为none则不显示。 nexttobullets
touchenabled 是否允许触摸滑动,如果设置为off则不允许。 on
onHoverStop 是否开启鼠标滑向时暂停,on:开启,off:关闭。 on
fullWidth 是否开启全屏展示图片内容,on:开启,off:关闭。 on

每个
  • 标签设置
  • 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... -
    评论0
    头像

    系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

    1 2