цикл через возвращенный json с помощью jquery

Question

Я получаю изображение и информацию гиперссылки, возвращенную в JSON. Я хотел бы использовать плагин цикла, если это возможно.

Пример: [["1.jpg","http:\/\/www.this.net\/"],["2.jpg","http:\/\/www.that.net\/"],["3.jpg","http:\/\/www.what.com/l"]]

Когда мой HTML первой загрузке страницы будет уже это:

<div id="container"><a id="changeLink" href="o.html" target="_blank"><img id="changeImage" src="100.jpg" /></a> 

Используя возвращаемый JSON, я хотел бы Переберите изображения путей/ссылки и обновляйте элементы changeLink и changeImage каждые 4 секунды. После того, как он достигнет конца, я бы хотел, чтобы он повторил.

При загрузке страницы:

<a id="changeLink" href="http://www.this.net" target="_blank"><img id="changeImage" src="1.jpg" /></a> 

через 4 секунды:

<a id="changeLink" href="http://www.that.net" target="_blank"><img id="changeImage" src="2.jpg" /></a> 

Через 8 секунд:

<a id="changeLink" href="http://www.what.com" target="_blank"><img id="changeImage" src="3.jpg" /></a> 

Через 12 секунд:

<a id="changeLink" href="http://www.this.net" target="_blank"><img id="changeImage" src="1.jpg" /></a> 

Через 16 секунд:

<a id="changeLink" href="http://www.that.net" target="_blank"><img id="changeImage" src="2.jpg" /></a> 

Через 20 секунд:

<a id="changeLink" href="http://www.what.com" target="_blank"><img id="changeImage" src="3.jpg" /></a> 

и так далее.

Answer 1

Похоже, вы хотели бы взять возвращенный JSON, использовать его для генерации <img> элементов в DOM с использованием атрибута src, указывающего на URL-адреса в JSON, а затем применить функциональные возможности для циклического просмотра изображений.

Этого можно достичь, используя, например, cycle plugin. Что-то вроде следующего должно работать. Примечание: тестировалась

$.getJSON('jsonArray.php', function(data){ 
     var imgs = $.map(data, function (e, i) { 
      return $('<img>').attr('src', e[1] + e[0]); 
     }); 
     $('#container-for-imgs') 
      .append(imgs) 
      .find('img') 
      .cycle({ 
       fx: 'fade' 
      }); 
    }); 

EDIT:

В ответ на комментарий, я думаю, что вы хотели бы сделать что-то вроде этого. Вы станете более конкретным, если я неверно истолковал

$.getJSON('jsonArray.php', function(data){ 
     var change = ['changeLink', 'changeImage'], 
      anchors = $.map(data, function (e, i) { 
       var anchor = $('<a target="_blank" >').attr('href', e[1]).attr('id', change[0] + i); 
       return $('<img>').attr('src', e[0]).attr('id', change[1] + i).appendTo(anchor); 
      }); 
     $('#container-for-elements') 
      .append(anchors); 
    });