背景图轮播 响应式 插件 vegas的使用和下载

1. 引入

    <link rel="stylesheet" href="/static/css/vegas.css">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/vegas.js"></script>

2. 写script

<script>
    $(function(){
//调用vegas方法，其中slides是要显示的背景图片，src指示地址。
        $("body").vegas({
            slides:[
                { src : '/static/images/bd1.jpg' },
                { src : '/static/images/bd2.jpg' },
                { src : '/static/images/bd3.jpg' },
                { src : '/static/images/bd4.jpg' }

            ],
//vagas有两种过渡方式，一种是transition，另一种是animation，另种方式各有很多的过渡效果。slideLeft2是transition中的一种
            transition : 'slideLeft2'
        });
    })
</script>

　　

transition 的效果有：

fade   fade2

slideLeft   slideLeft2

burn   burn2

slideRight   slideRight2

slideUp   slideUp2

slideDown   slideDown2

zoomIn   zoomIn2

zoomOut   zoomOut2

swirlLeft   SwirlLeft2

swirlRight   swirlRight2

blur   blur2

flash   flash2

每个转换都有两个版本。通过transitionDuration选项可以设置毫秒数。

animation 的效果有：

kenburns 

kenburnsUp

kenburnsDown

kenburnsRight

kenburnsLeft

kenburnsUpLeft

kenburnsUpRight

kenburnsDownLeft

kenburnsDownRight

random

在官方网站上可以尝试各种效果。

可以使用数组定义转换的列表

transition : [ ' fade ', ' burn ' ]

也可以自定义转换

转换有3个类名，将其插入css中。

.vegas-transition-fade,
.vegas-transition-fade2 {
//此处可以自己随意设置效果
    opacity: 0;
}

.vegas-transition-fade-in,
.vegas-transition-fade2-in {
    opacity: 1;
}

.vegas-transition-fade2-out {
    opacity: 0;
}

并且在转换列表中添加自己的转换

transitionRegister: [ 'myTransition1', 'myTransition2' ]

Animation 通过animationDuration选项可以设置毫秒数，其他的和transition原理都一样。

设置自定义转换时，需要使用帧动画 @keyframes ，并且在转换列表中添加：

animationRegister: [ 'myAnimation1', 'myAnimation2' ]

即可。

下载地址：https://github.com/jaysalvat/vegas