ajax轮播图控件,基于json数据的jquery卡片轮播图插件
這是一款基于json數(shù)據(jù)的jquery卡片輪播圖插件。該插件通過ajax來獲取卡片的信息，動(dòng)態(tài)顯示卡片。它還提供不使用ajax的方式來獲取數(shù)據(jù)，和其它一些api接口。
使用方法
在頁面中引入jquery和altSlider.js、altSlider.css文件。
初始化插件
通過ajax方法來初始化插件的方法如下：
$(function () {
$(".block").altSlider(
{
url: 'your-json-file.json'
}
);
});
如果你需要?jiǎng)討B(tài)在指定的時(shí)間后重新加載數(shù)據(jù)，可以使用dynamicReload參數(shù)。
$(function () {
$(".block").altSlider(
{
url: './test.json',
dynamicReload: 3000
}
);
});
如果壓實(shí)現(xiàn)輪播圖的自動(dòng)滾動(dòng)，可以使用auto_scroll參數(shù)。
$(function () {
$(".block").altSlider(
{
url: './auto-scroll.json',
auto_scroll: 1000
}
);
});
關(guān)閉輪播圖的自動(dòng)滾動(dòng)，使用displayScroll參數(shù)。
$(function () {
$(".block").altSlider(
{
url: './test.json',
displayScroll: false
}
);
});
如果你不想通過ajax來調(diào)用數(shù)據(jù)，可以通過rawData參數(shù)來實(shí)現(xiàn)。
$(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"
}
]
}
);
});
數(shù)據(jù)的格式如下：
[
{
"title": "標(biāo)題",
"body": "內(nèi)容",
"create_time": "創(chuàng)建時(shí)間",
"header": "頭部",
"img_src": "images/2.jpg",
"src": "https://google.com"
}
]
總結(jié)
以上是生活随笔為你收集整理的ajax轮播图控件,基于json数据的jquery卡片轮播图插件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 51Nod 1584 加权约数和
- 下一篇： IxChariot 带破解