Javascript 页面加载上带有标题的随机图像

我有一个工作代码，用于使用数组在页面加载时加载随机图像。我怎样才能加上标题呢？哪种方法最好：我应该使用另一个数组来存储标题还是？任何建议，谢谢

我的代码是：

<script type="text/javascript">
    var images=new Array(); // regular array (add an optional integer
        images[0]="https://s-media-cache-ak0.pinimg.com/736x/a5/47/45/a5474577f4a4ae93c85db719d0cbafd4.jpg";
        images[1]="https://s-media-cache-ak0.pinimg.com/736x/e6/41/74/e64174e355f78a0f07e951bcec62ca96.jpg";
        images[2]="https://media.giphy.com/media/3o7abHrsGbV10rCeze/giphy.gif";
        images[3]="https://media.giphy.com/media/Bbt5FxRiArl3a/giphy.gif";
        images[4]="http://2ca54c85d3f608494402-1c6b4b69d2498d95ab6e291a3fb28b64.r36.cf1.rackcdn.com/16/1/large.jpg";
// Preload
$(images).each(function(){
    $("<img/>")[0].src = this;
});

// Random index
var randomNumber = Math.floor( Math.random() * images.length );

// Call backstretch the first time
$.backstretch(images[randomNumber], {duration: 30000, fade: 1200});

// Change images after that with setInterval
setInterval(function() {
        index = Math.floor( Math.random() * images.length );
        $.backstretch(images[index], {duration: 30000, fade: 1200});
    }, 30000);
</script>

var images=新数组（）；//正则数组（添加可选整数）
图像[0]=”https://s-media-cache-ak0.pinimg.com/736x/a5/47/45/a5474577f4a4ae93c85db719d0cbafd4.jpg";
图像[1]=”https://s-media-cache-ak0.pinimg.com/736x/e6/41/74/e64174e355f78a0f07e951bcec62ca96.jpg";
图像[2]=”https://media.giphy.com/media/3o7abHrsGbV10rCeze/giphy.gif";
图像[3]=”https://media.giphy.com/media/Bbt5FxRiArl3a/giphy.gif";
图像[4]=”http://2ca54c85d3f608494402-1c6b4b69d2498d95ab6e291a3fb28b64.r36.cf1.rackcdn.com/16/1/large.jpg";
//预载
$（图像）。每个（函数（）{
$("

我会使用一个数组（对象）来更好地组织事物

因此，您的数组项将如下所示：

images[0] = {url : "https://s-media-cache-ak0.pinimg.com/736x/a5/47/45/a5474577f4a4ae93c85db719d0cbafd4.jpg", caption : "awesome image"};

然后可以使用相同的计算索引设置图像和标题

创建一个函数来更新图像和标题，并使用sentInterval调用它。这样您的代码会更干净。例如：

声明您的功能：

function setRandomImage(imgs) {
    var index = Math.floor(Math.random() * imgs.length);    
    $.backstretch(imgs[index].url);  
    $("#caption").html(imgs[index].caption); 
}

声明您的数组：

var images = new Array();
    images[0] = {url : "http://blah0.jpg"};
    images[1] = {url : "http://blah1.jpg"};
    images[2] = {url : "http://blah2.jpg"};

每3秒在阵列上调用函数：

setInterval(setRandomImage, 3000, images);

---

谢谢你的回答。我试过了，但没有真正起作用。我的预加载功能被跳过，在给定的持续时间后，图像会显示出来，但没有标题。我遗漏了什么吗？你是否在页面中添加了标题div？类似的遗漏，谢谢！还有一个问题是setInterval函数的花括号在重新初始化标题。标题正在工作！现在的问题是，我的预加载功能被忽略，因此第一幅图像不会在页面加载时显示。您是否有当前代码的一部分？如果没有，您是否可以更新您的问题代码，或将此问题标记为已回答并提出另一个问题？我更新了您的小提琴。我将其简化为位，因为我无法理解HTML的其余部分是如何构造的。我还将持续时间更改为3秒，并添加了一个控制台调用，以便您可以查看更改（您将希望在live站点上删除此内容）.最后，我注释掉了预加载，因为它会导致页面在加载时不做任何操作，但是如果您想要/需要它，您可以取消对该行的注释，它将正常工作。