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

}

]

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

  1. Android手工打造脑图控件

    背景 所有的开发背景都是项目需要.先上屌炸天的设计图. 效果 导出效果不清晰,尽量看吧. 功能 脑图展示 样式订制(文字颜色.图标.样式.边框..) 折叠方式支持两种:a.同侧折叠不影响其他.b.同侧 ...

  2. Android自定义控件之轮播图控件

    背景 最近要做一个轮播图的效果,网上看了几篇文章,基本上都能找到实现,效果还挺不错,但是在写的时候感觉每次都要单独去重新在Activity里写一堆代码.于是自己封装了一下.这里只是做了下封装成一个控件 ...

  3. Ext Scheduler Web资源甘特图控件

    原文来自 http://www.fanganwang.com/Product-detail-item-1430.html欢迎转载. 关键字: 资源甘特图又叫负荷图,其纵轴不再列出活动,而是列出整个部门 ...

  4. vs mfc数据与控件绑定错了_如何进行数据趋势分析?VS扩展工具——C1迷你图控件了解一下...

    点击"了解更多"获取ComponentOne 2020 v1正式版下载 迷你图 -- Sparklines是迷你的轻量级图表,有助于快速可视化数据. 它们是由数据可视化传奇人物Ed ...

  5. 【Visual Studio 扩展工具】使用 ComponentOne迷你图控件,进行可视化数据趋势分析...

    概述 迷你图 -- Sparklines是迷你的轻量级图表,有助于快速可视化数据. 它们是由数据可视化传奇人物Edward Tufte发明的,他将其描述为"数据密集,设计简单,字节大小的图形 ...

  6. 【Visual Studio 扩展工具】使用 ComponentOne迷你图控件,进行可视化数据趋势分析... 1

    概述 迷你图 -- Sparklines是迷你的轻量级图表,有助于快速可视化数据. 它们是由数据可视化传奇人物Edward Tufte发明的,他将其描述为"数据密集,设计简单,字节大小的图形 ...

  7. 股票金融K线图控件AnyStock详细介绍教程

    AnyStock是一款基于XML/JSON的Flash金融图表解决方案,转换你的实时数据为具有交互功能的顶级图表,使你的数据直观地展现在Web页面上,控件支持滚动.下拉.动缩放效果等,并且提供了一系列 ...

  8. HQChart使用教程5- K线图控件操作函数说明

    K线图控件操作函数说明 周期切换 切换股票 切换指标 增加一个窗口指标 AddIndexWindow indexName option 增加一个自定义通达信脚本指标窗口 AddScriptIndexW ...

  9. 发布一个用于WinCE的矢量图控件

    发布一个在wince操作系统下,采用.net compact framework 1.0 ( c#)开发的矢量图控件,我于2007年3月份集中一个月的经历完成了它.当然,它的前身是2005年12月我写 ...

最新文章

  1. 【更新】比较智能的爬取姓名
  2. flannel源码分析--newSubnetManager
  3. SVN服务器和客户端的基本使用详细图解
  4. 比世界纪录快3倍 阿里云377秒完成100TB数据排序
  5. hdu 1224【Free DIY Tour】
  6. <scope>test</scope>的作用
  7. 使用Powershell远程管理Windows Server(WinRM)
  8. perl中shift 和unshift 操作
  9. 解决NuGet加载或下载资源慢的问题
  10. 计算机打字考试的技巧,快速打字有什么技巧
  11. 量化感知训练_《量化健身 动作精讲》:专业解读健美身材的秘密
  12. 蓝桥杯算法提高试题 学霸的迷宫(BFS)
  13. 如何制作打首板的量化策略
  14. 利用微信公共号的带参数二维码做(扫码登录)
  15. 功率开关的RC-Snubber电路设计
  16. SpringMVC中文件的上传和下载
  17. 已解决org.springframework.beans.factory.BeanDefinitionStoreException: Unexpected exception parsing XML异
  18. MySQL数据库的完全卸载
  19. 大数据系列 | 全国职业院校技能大赛大数据应用技术赛项笔记分享-离线抽取模块
  20. 【青铜到王者】算法晋级之路

热门文章

  1. 10行Python代码批量实现pdf转txt,word,提取表格到excel
  2. return在c语言的意思,return在c语言中是什么意思?_后端开发
  3. java引用静态方法会实例化类吗_Java系列之:看似简单的问题 静态方法和实例化方法的区别...
  4. 前端工具文档网站推荐(印记中文、程序员盒子、前站)
  5. 180年魔鬼训练!人工智能打Dota 2 轻松打倒人类
  6. linux 命令:tar 详解
  7. 搞掉Windows Media Player后台进程,禁止自动启动
  8. MFCC中CString, int, string, char之间的转换
  9. tp90和tp99是指什么性能指标
  10. s3c2450下AC97驱动研究