Javascript 循环遍历数组并使用每个数组值更改html元素

我正在引入一个PHP编码的JSON字符串，我很难让Javascript按照我所需要的方式工作。让我解释一下我想做什么。我有一个图像，我试图每20秒改变一次，并伴随着文字。我在让循环部分在javascript代码中工作时遇到了问题

以下是我的PHP：

public function pull_projects() {
        $sql = $this->db->query("SELECT * FROM project_table LIMIT 4");
        $project_title_array = array();
        $project_sub_title_array = array();
        $project_description_array = array();
        $project_picture_url_array = array();
        foreach($sql->result() as $row) {
            array_push($project_title_array,$row->project_title);
            array_push($project_sub_title_array,$row->project_sub_title);
            array_push($project_description_array,$row->project_description);
            array_push($project_picture_url_array,$row->project_picture_url);
        }
        echo json_encode(array('project_title' => $project_title_array, 'project_sub_title' => $project_sub_title_array, 'project_description' => $project_description_array, 'project_picture_url' => $project_picture_url_array));
    }

上述代码输出：

{  
   "project_title":[  
      "1 STOP RADIO 85.9",
      "Official Slimm",
      "The Lab Community Foundation",
      "Official Michael Wyatt"
   ],
   "project_sub_title":[  
      "www.1stopradio859.com",
      "www.officialslimm.com",
      "www.thelabcommunityfoundation.org",
      "www.officialmichaelwyatt.com"
   ],
   "project_description":[  
      "Bon App\u00e9tit and epicurious.com joined forces to create an irresistible marketing group called FIG. We brought it to the web for our agency partners Independent Content, creating a rich and immersive online experience that delivers their powerful marketing capabilities to potential clients.",
      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.",
      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.",
      "Bon App\u00e9tit and epicurious.com joined forces to create an irresistible marketing group called FIG. We brought it to the web for our agency partners Independent Content, creating a rich and immersive online experience that delivers their powerful marketing capabilities to potential clients."
   ],
   "project_picture_url":[  
      "1stopradio859com.png",
      "officialslimmcom.png",
      "thelabcommunityfoundationorg.png",
      "officialmichaelwyattcom.png"
   ]
}

我的Javascript代码：

$.getJSON("Home/pull_projects", function(data) {

            // Sets global variables for returned json data
            window.$project_title = data.project_title;
            window.$project_sub_title = data.project_sub_title;
            window.$project_description = data.project_description;
            window.$project_picture_url = data.project_picture_url;

            // Turns returned json data into an array
            window.$project_picture_url_array = $.map(window.$project_picture_url, function(el) { return el; });

            window.$project_sub_title_array = $.map(window.$project_sub_title, function(el) { return el; });

            // Loops through and changes each value
            window.$project_picture_url_array.forEach(function(current_value, index, initial_array) {
                setTimeout(function() {
                    console.log(current_value);
                    $('.website_slider > .slider').attr('src','assets/'+current_value);
                }, 5000);
            });
});

我的问题在于javascript中的ForEach语句。当我运行它时，它会在Chrome终端中输出以下内容：

1stopradio859com.png
officialslimmcom.png
thelabcommunityfoundationorg.png
officialmichaelwyattcom.png

---

我需要它运行，每20秒只输出一个值，而不是一次全部输出。任何帮助都将不胜感激。

setTimeout

不是阻塞呼叫。循环将继续在集合上迭代。所有回调都将在彼此之间的一小段时间内触发，而不是在一段时间间隔内触发。改用

setIntveral

：

var myArray=['a'，'b'，'c'，'d'，'e']；
var指数=0；
var x；
函数printNextValue（）{
log（myArray[index]）；
索引=（索引+1）%myArray.length；
}
//这将每秒执行一次，直到打印所有数组元素。
printNextValue（）；
x=设置间隔（printNextValue，1000）
setTimeout
不是阻塞调用。循环将继续在集合上迭代。所有回调都将在彼此之间的一小段时间内触发，而不是在一段时间间隔内触发。改用
setIntveral
：


var myArray=['a'，'b'，'c'，'d'，'e']；
var指数=0；
var x；
函数printNextValue（）{
log（myArray[index]）；
索引=（索引+1）%myArray.length；
}
//这将每秒执行一次，直到打印所有数组元素。
printNextValue（）；
x=设置间隔（printNextValue，1000）下面是一些示例Javascript代码，用于每秒显示一个图像名称

var arr = [
    "1stopradio859com.png",
    "officialslimmcom.png",
    "thelabcommunityfoundationorg.png",
    "officialmichaelwyattcom.png"
];

var counter = 0;

window.setInterval( function() {
    console.log( arr[ counter++ % arr.length ] );
}, 1000 );

下面是一些示例Javascript代码，用于每秒显示一个图像名称

var arr = [
    "1stopradio859com.png",
    "officialslimmcom.png",
    "thelabcommunityfoundationorg.png",
    "officialmichaelwyattcom.png"
];

var counter = 0;

window.setInterval( function() {
    console.log( arr[ counter++ % arr.length ] );
}, 1000 );

这个解决方案怎么样。希望有帮助


var arr=[“1stopredio859com.png”、“officialslimmcom.png”、“thelabcommunityfoundationorg.png”、“officialmichaelwyattcom.png”]；
$（“#test”）.html（arr[0]）.fadeTo（100,0.1）、fadeTo（200,1.0）；
var str=“”；
var计数器=1；
var timer=setInterval（函数（）{
如果（计数器==0）{str=arr[counter]}
如果（计数器==1）{str=arr[counter]}
如果（计数器==2）{str=arr[counter]}
如果（计数器==3）{str=arr[counter]}
$（“#test”）.html（“+str+”）.fadeTo（100,0.1）、fadeTo（200,1.0）；
++计数器；
如果（计数器==4）{
计数器=0；
}
}, 2000);
这个解决方案怎么样。希望有帮助


var arr=[“1stopredio859com.png”、“officialslimmcom.png”、“thelabcommunityfoundationorg.png”、“officialmichaelwyattcom.png”]；
$（“#test”）.html（arr[0]）.fadeTo（100,0.1）、fadeTo（200,1.0）；
var str=“”；
var计数器=1；
var timer=setInterval（函数（）{
如果（计数器==0）{str=arr[counter]}
如果（计数器==1）{str=arr[counter]}
如果（计数器==2）{str=arr[counter]}
如果（计数器==3）{str=arr[counter]}
$（“#test”）.html（“+str+”）.fadeTo（100,0.1）、fadeTo（200,1.0）；
++计数器；
如果（计数器==4）{
计数器=0；
}
}, 2000);

因此，您需要在20秒内显示1stopradio859com.png，然后在20秒后显示1stopradio859com.png和officialslimmcom.png，然后在另20秒后显示officialslimmcom.png、officialslimmcom.png和LabCommunityFoundation org.png，依此类推。正确吗？我只需要一个值来显示周期。例如，20秒后显示1stopradio859com，20秒后显示officialslimmcom.png，然后20秒后显示LabCommunityFoundationorg.png。没有重复项，所以您需要在20秒内显示1stopradio859com.png，然后在20秒后显示1stopradio859com.png和officialslimmcom.png，然后在另20秒后显示officialslimmcom.png、officialslimmcom.png和LabCommunityFoundation org.png，依此类推。正确吗？我只需要一个值来显示周期。例如，20秒后显示1stopradio859com，20秒后显示officialslimmcom.png，然后20秒后显示LabCommunityFoundationorg.png。没有重复，工作完美，如果我想使它成为一个无限循环，我会做。。。？。。。例如打印a…b…c…d…e…a…b…c…d…e…a…b。。无限如果你不想让它无限，不要清除间隔，而是用数组的长度修改索引-看更新后的代码片段是否完美，如果我想让它成为无限循环，我会做。。。？。。。例如打印a…b…c…d…e…a…b…c…d…e…a…b。。无限如果你不想让它无限，不要清除间隔，而是用数组的长度修改索引-请参阅更新的代码片段