最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/ 沐浴春风 2015-06-10 05:14浏览(1772)

这是一款非常强大的内容切换插件,它基于jQuery,它充分响应,支持移动设备,支持手机触摸,键盘翻页;它内置幻灯、视频播放计时器,它拥有各种模式:自定义,自动响应,全屏;它有多种动画效果、3d效果

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

Slider Revolution演示全屏内容切换动画效果
分类:图片代码 > 图片轮播 难易:高级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 30 积分

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>

我们放置了两个

  • 标签,
  • 中放置切换的内容,包括主要图片、文字、按钮等属性设置。

    <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... -
  • 声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/149.html
    评论1
    头像

    友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

    • 头像 沙发
      10-19 14:09
      qq562140910
      沙发,,沙发
    1 2