这是一款基于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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!