欢迎投稿

菜鸟之家

当前位置:菜鸟之家 > jquery库 > 幻灯片和轮播图 > 基于json数据的jquery卡片轮播图插件

基于json数据的jquery卡片轮播图插件

基于json数据的jquery卡片轮播图插件

关键词:轮播图,卡片,json,jquery轮播图,jquery轮播图插件,卡片轮播图,动态数据,json数据轮播图,动态轮播图,jquery库,lunbo

描述:这是一款基于json数据的jquery卡片轮播图插件。该插件通过ajax来获取卡片的信息,动态显示卡片。它还提供不使用ajax的方式来获取数据,和其它一些api接口。

简要教程

这是一款基于json数据的jquery卡片轮播图插件。该插件通过ajax来获取卡片的信息,动态显示卡片。它还提供不使用ajax的方式来获取数据,和其它一些api接口。

使用方法

在页面中引入jquery和altSlider.js、altSlider.css文件。

<link rel="stylesheet" href="path/to/altSlider.css">
<script src="js/jquery.min.js"></script>
<script src="js/altSlider.js"></script>
                
初始化插件

通过ajax方法来初始化插件的方法如下:

$(function () {
    $(".block").altSlider(
        {
            url: "your-json-file.json"
        }
    );
});
                

如果你需要动态在指定的时间后重新加载数据,可以使用dynamicReload参数。

$(function () {
    $(".block").altSlider(
        {
            url: "./test.json",
            dynamicReload: 3000
        }
    );
});
                

如果压实现轮播图的自动滚动,可以使用auto_scroll参数。

$(function () {
    $(".block").altSlider(
        {
            url: "./auto-scroll.json",
            auto_scroll: 1000
        }
    );
});
                

关闭轮播图的自动滚动,使用displayScroll参数。

$(function () {
    $(".block").altSlider(
        {
            url: "./test.json",
            displayScroll: false
        }
    );
});
                

如果你不想通过ajax来调用数据,可以通过rawData参数来实现。

$(function () {
    $(".block").altSlider(
        {
            rawData:
                [
                    {
                        "title": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
                        "body": "Test body 1",
                        "create_time": "2018-01-01 00:00:01",
                        "img_src": "http://s5.uploads.ru/t/0hYTP.jpg",
                        "src": "https://google.com"
                    },
                    {
                        "title": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. ",
                        "body": "Test body 2",
                        "create_time": "2018-02-02 00:23:01",
                        "img_src": "http://sa.uploads.ru/t/xqseC.jpg",
                        "src": "https://google.com"
                    },
                    {
                        "title": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
                        "body": "Test body 3",
                        "create_time": "2018-03-02 00:23:01",
                        "img_src": "http://s3.uploads.ru/t/ecM5L.jpg",
                        "src": "https://google.com"
                    }
                ]
            }
    );
});
                

数据的格式如下:

[
  {
    "title": "标题",
    "body": "内容",
    "create_time": "创建时间",
    "header": "头部",
    "img_src": "images/2.jpg",
     "src": "https://google.com"
  }
]                  
                

该json数据的jquery卡片轮播图插件的github地址为:https://github.com/Trixwell/altSlider

说明:菜鸟之家所有素材均是用户自行上传分享并拥有版权或使用权,仅供网友学习交流,未经上传用户书面授权,请勿作他用。若您的权利被侵害,请联系QQ:11809283或发送邮件至11809283@qq.com。

菜鸟之家承诺:本站所有资源,无需注册,免费下载,无病毒,无弹窗,无干扰链接!

转载请注明出处!本文地址:http://www.jeeok.com/jquery_lunbo/8936.html

 在线演示  免费下载
编号:201805120000008936
大小:5.99MB
上传时间:2018-05-14 06:56
素材由用户"13808358198"上传分享。

标签

最新推荐素材

与基于json数据的jquery卡片轮播图插件相关的素材

.