如何使用 json 数据制作卡片滑块
Posted
技术标签:
【中文标题】如何使用 json 数据制作卡片滑块【英文标题】:How to make a card slider with json data 【发布时间】:2021-06-30 07:13:32 【问题描述】:我正在尝试使用这样的 json 数据制作卡片滑块:http://femkreations.com/projects/ajax/ajax-carousel/index.php,而我想使用来自此网址的 json 数据:https://api.thecatapi.com/v1/breeds 显示 5 张卡片,其中包含猫的名称、描述和图像.我已经用 XMLHttpRequest 加载了 json 数据,但我真的不知道从现在开始我需要做什么。我是这些事情的初学者,希望有人能帮助我。
【问题讨论】:
【参考方案1】:首先你要根据自己的JSON数据定义要使用的模板 假设为了简化起见,您的 JSON 看起来像这样
cats: [
name: "rico",
power_level: "500",
bio: "nice dude"
,
name: "johnnyboi",
power_level: "1200",
bio: "bad guy"
,
name: "earl",
power_level: "over9000",
bio: "stronk guy"
]
这家伙用这样的 html 代码定义了模板(在 HTML 代码之间的某个地方)。请注意,您将不得不工作或复制 CSS 类扬声器。
<script id="speakerstpl" type="text/template">
#speakers
<div class="speaker">
<img src="images/shortname_tn.jpg" />
<h3>name</h3>
<h4>reknown</h4>
<p>bio</p>
</div>
/speakers
</script>
所以让我们按照我上面写的 JSON 的方式调整模板:
<script id="speakerstpl" type="text/template">
#cats
<div class="speaker">
<h3>name</h3>
<h4>power_level</h4>
<p>bio</p>
</div>
/cats
</script>
现在,在我们使用函数背后的魔法之前,请注意此页面正在使用以下外部库(不要忘记将它们添加到您的文档中):
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.cycle/2.9999.8/jquery.cycle.all.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js" type="text/javascript"></script>
让我们打电话:
var data =
cats: [
name: "rico",
power_level: "500",
bio: "nice dude"
,
name: "johnnyboi",
power_level: "1200",
bio: "bad guy"
,
name: "earl",
power_level: "over9000",
bio: "stronk guy"
]
var template = $('#speakerstpl').html();
var html = Mustache.to_html(template,data);
$('#carousel').html(html); //this element is a div inside another div (wrapper)
//final step for the rotation/cycle
$('#carousel').cycle(
fx: 'fade',
pause: 1,
next: '#next_btn',
prev: '#prev_btn',
speed: 500,
timeout: 10000
);
编辑:这里有一个来自https://developpaper.com/xmlhttprequest-for-asynchronous-requests/ 的简单代码,以便顺便获取您的数据:
var data = cats: [];
var xhr = new XMLHttpRequest(),
method = "GET",
url = "https://api.thecatapi.com/v1/breeds";
xhr.open(method, url, true);
xhr.responseType = "json";
xhr.onreadystatechange = function ()
if(xhr.readyState === xhr.DONE)
if (xhr. status === 200) // successful request
console.log(xhr.response);
//capture this response using your data variable
data.cats = xhr.response;
else // request failed
console.log(xhr.response);
;
xhr.ontimeout = function(event)
console.log('request timeout!');
xhr.setRequestHeader('Content-Type','application/json');
xhr.send();
【讨论】:
以上是关于如何使用 json 数据制作卡片滑块的主要内容,如果未能解决你的问题,请参考以下文章
如何使用从 Swift 3 中的滑块中选择的 JSON 数据更新 tableviewcell?
当卡片数据由循环提供时,如何从物化(css)卡片制作多项目轮播?