Javascript json提要中的jQuery滑块

我正在尝试创建一个滑块，它将显示餐厅的每日特色菜。我有一个json（或xml）提要，可以从中获取数据（它来自wordpress）。我能够将数据放入数组并将其记录到控制台，但我不知道如何循环数组并逐个显示内容

以下是脚本：

var content = new Array();
$.getJSON("http://riverdalecornercafe.com/wp/category/isd/feed/json", function(data) {
    $.each(data, function(i, item) {
        content.push(item.content);
    });
console.log(content[0]);
});

html:

---

如果您有JSON数据，它非常简单。您可以使用ajax执行查询：

    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        url: "http://riverdalecornercafe.com/wp/category/isd/feed/json",
        success: function(jsonArray) {
            for (var i = 0; i < jsonArray.length; i++)
            {
               $('.content').append(/*the format you want to add in html */ json value : 'jsonArray[i].name)
            }


     error: function()
         {
            you can handle your error
          }

$.ajax({
类型：“POST”，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
url:“http://riverdalecornercafe.com/wp/category/isd/feed/json",
成功：函数（jsonArray）{
for（var i=0；i

---

希望有帮助。

您可以为json项目创建一个循环。 有了json的最后一项，您可以一个接一个地进行

乙二醇

$.getJSON（“http://riverdalecornercafe.com/wp/category/isd/feed/json，函数（数据）{
var myJson=数据；
var lastItem=myJson.length；
对于（变量i=0；i

最新更新

<script type="text/javascript" text="javascript">
    $.getJSON("http://riverdalecornercafe.com/wp/category/isd/feed/json", function (data) {
        var myJson = data;
        var lastItem = myJson.length;
        for (var i = 0; i < lastItem; i++) {
            $('.innerCarousel').css('width', (lastItem * 500) + 'px');
            $('.innerCarousel').html("<div style=float:left;width:500px;><img src='" + myJson[i].imagePath + "' /></div>");
        }
    });
    $('.next').on('click', function () {
        $('.innerCarousel').animate({ left: ($(this).css('left') - 500) + "px" },"medium");
    });
    $('.prev').on('click', function () {
        $('.innerCarousel').animate({ left: ($(this).css('left') + 500) + "px" }, "medium");
    });
</script>


<div style="width:500px;height:300px;overflow:hidden;position:relative;">
    <div class="innerCarousel" style="position:absolute;left:0px;"></div>
    <div class="next"></div>
    <div class="prev"></div>
</div>

$.getJSON（“http://riverdalecornercafe.com/wp/category/isd/feed/json，函数（数据）{
var myJson=数据；
var lastItem=myJson.length；
对于（变量i=0；i

谢谢，我能够获取json数据并将其加载到数组中，但我的问题是如何迭代数组并逐个显示内容，类似于图像滑块。您可以将div中的所有图像绑定为隐藏溢出并进行一些滑动（动画）在内部，或者你可以简单地调用数组中的下一个元素。如果你想要，我可以给你发送代码。谢谢，我很想看看代码，我还不太擅长JavaScript，所以我必须通过尝试和失败来学习。

$.getJSON("http://riverdalecornercafe.com/wp/category/isd/feed/json", function(data) {
   var myJson = data;
   var lastItem = myJson.length;
   for (var i = 0; i < lastItem; i++){
      $('.content').append(myJson[i].title);
   }
});

<script type="text/javascript" text="javascript">
    $.getJSON("http://riverdalecornercafe.com/wp/category/isd/feed/json", function (data) {
        var myJson = data;
        var lastItem = myJson.length;
        for (var i = 0; i < lastItem; i++) {
            $('.innerCarousel').css('width', (lastItem * 500) + 'px');
            $('.innerCarousel').html("<div style=float:left;width:500px;><img src='" + myJson[i].imagePath + "' /></div>");
        }
    });
    $('.next').on('click', function () {
        $('.innerCarousel').animate({ left: ($(this).css('left') - 500) + "px" },"medium");
    });
    $('.prev').on('click', function () {
        $('.innerCarousel').animate({ left: ($(this).css('left') + 500) + "px" }, "medium");
    });
</script>


<div style="width:500px;height:300px;overflow:hidden;position:relative;">
    <div class="innerCarousel" style="position:absolute;left:0px;"></div>
    <div class="next"></div>
    <div class="prev"></div>
</div>