根据JSON对象和间隔更改页面内容

Question

我为在大屏幕上显示的静态页面构建了CMS，但是我不知道如何间隔地从JSON对象中更改页面内容。我感觉这类似于幻灯片，但是我不知道如何在间隔上更改它时如何访问HTML中的JSON。

当前，我有一个将触发显示的链接：链接到显示

单击此按钮时，mysql查询将获取与显示3关联的所有页面，然后json对数组进行编码，其输出如下：

[{"pageID":"104",
"page_type_id":"1",
"display_id":"3",
"duration":"56",
"background_img":null,
"page_id":"104",
"content":"\r\n\r\n\r\n<\/head>\r\n\r\nThis is full content<\/p>\r\n<\/body>\r\n<\/html>"},

{"pageID":"116",
"page_type_id":"1",
"display_id":"3",
"duration":"54",
"background_img":"images\/BG_spring.svg",
"page_id":"116",
"content":"\r\n\r\n\r\n<\/head>\r\n\r\nThis background should be green<\/p>\r\n<\/body>\r\n<\/html>"
}]

如何设置此项，以便在单击此链接并访问页面时，首先显示JSON元素中第一个元素的content，然后显示56秒（json的持续时间）对象元素）切换到下一个元素的content，并在54秒后执行相同操作？

基本上我希望立即显示页面加载

<div>
    <!-- This would be "This is full content", content from the first element -->
</div>

Then after 56 seconds, change this out to

<div>
    <!-- This would be "This background should be green", content from the second element -->
</div>

我一直在用javascript为JSON创建对象，并使用URL（附加值和刷新）进行播放，但是如果我想做的就是更改内容，则可能会有更好的方法。

<script type="text/javascript">
// encode your php array to json
let obj = <?php echo $showDisplays; ?>;

//This following block successfully refreshes the page after the duration of the first JSON object, but I'm not sure that's the way to do this
window.setTimeout(function () {
    window.location.href = nextURL;
}, obj[0].duration * 1000);

obj.forEach(function(o){console.log(o)})//This prints both objects in my console properly
</script>

如何根据使用时长的javascript将其更改为HTML，从而访问html中的JSON内容？