Question

我有一个工作代码，用于在页面加载时使用数组加载随机图像。我怎么能为它添加字幕？哪种方法最好：我应该使用另一个数组存储字幕还是？任何建议表示赞赏！

我的代码是：

<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>

Answer 1

我会使用1个数组（对象）来保持更好的组织。

所以你的数组项看起来像这样：

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);

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

1 个答案: