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

PetitQ 幻灯片/轮播 2018-11-08 2.17K 0 0

这是一款基于 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"
```
```
  }
```
```
]
```

Github 地址：https://github.com/Trixwell/altSlider

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

已有 544 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

幻灯片/轮播

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

使用方法

初始化插件

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

相关文章

jQuery+css3 3D画廊房间效果

流光溢彩Bootstrap响应式幻灯片特效

带过渡动画响应式jQuery幻灯片插件

发表回复取消回复

热销模板

幻灯片/轮播

使用方法

初始化插件

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

相关文章

发表回复 取消回复

热销模板

发表回复取消回复