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

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

使用方法

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

初始化插件

通过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"

}

]