非常轻,快jQuery幻灯片的效果

所属分类：媒体-幻灯片和轮播图

53330 328 查看评论 (3)

分享到微信朋友圈

查看演示立即下载

插件描述：这是一个更轻、更快的jQuery幻灯片插件。我们认为你会喜欢它的。

如何使用它:

添加jquery.skippr.css、jquery.skippr.js和jquery库到你页面的head位置。

注意jquery.skippr.css一定要添加到jquery.skippr.js之前

<head>
    <title>Your Awesome Website</title>       
    <link rel="stylesheet" href="css/jquery.skippr.css">
</head>

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="skippr/js/jquery.skippr.js"></script>

创建一个div元素用于每个幻灯片,并添加一个背景图像和css或样式属性。Skippr目标div标签内的所选元素background-images应用。把这个目标元素在一个容器元素的风格和定位。目标元素将完全填满它的父容器元素。

<div id="random">
    <div class="yellow"></div>
    <div style="background-image: url(img/test2.jpg)"></div>
    <div style="background-image: url(img/test5.jpg)"></div> 
    <div style="background-image: url(img/test3.jpg)"></div>                   
    <div style="background-image: url(img/test4.jpg)"></div>
</div>

调用插件关联对应的id

<script>
    $(document).ready(function() {
        $("#random").skippr();
        $("#random2").skippr({
                navType: 'bubble',
                autoPlay: true,
                autoPlayDuration: 2000
        });
    });
</script>

gridscrolling.js - HTML5文章布局和导航

jQuery计算器输入插件jCalculator