-3

我一直在使用以下代码生成随机图像，但没有显示任何图片。

<html>

<head>
<SCRIPT LANGUAGE="JavaScript">

var theImages = new Array() 

theImages[0] = '<img class="atvi-image-image" alt=""src="/content/dam/atvi/callofduty/blackops2/cod-bo2/dlc/mdlc-calling-card-flags.png" title="" height="467" width="675">'
theImages[1] = '<img class="atvi-image-image" alt="" src="/content/dam/atvi/callofduty/blackops2/cod-bo2/dlc/mdlc-nuketown-zombies.png" title="" height="732" width="1084">'
theImages[2] = '<img class="atvi-image-image" alt="" src="/content/dam/atvi/callofduty/blackops2/cod-bo2/dlc/mdlc-extra-slots.png" title="" height="480" width="752">'
theImages[3] = '<img class="atvi-image-image" alt="" src="/content/dam/atvi/callofduty/blackops2/cod-bo2/dlc/mdlc-nuketown-2025.png" title="" height="412" width="683">'



var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write(theImages[whichImage]);
}
</script>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
showImage();
</script>
</body>
</html>

预先感谢您的帮助！

4

3 回答 3

3

您已经在数组中拥有完整 <img>的标签。所以只需使用：

document.write(theImages[whichImage]);

虽然我建议不要使用document.write. 当然，在您的情况下，它在 HTML 中间执行，我认为问题不大。document.write如果在页面呈现后执行，那就不好了。通常，首选方法类似于appendChildmethod 甚至 setting innerHTML，尽管需要进行一些重构才能让您的代码使用它们。

这是我如何设置它的示例：

(function () {
    var theImages = [{
        src: "http://www.techinasia.com/techinasia/wp-content/uploads/2009/12/smile.png",
        width: "675",
        height: "467"
    }, {
        src: "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQdcHlJqgIKNOS0DaEjO31xK1zYtmJlza8z70ljiKFbo2ZgLdh9eA",
        width: "1084",
        height: "732"
    }, {
        src: "http://cdn2-b.examiner.com/sites/default/files/styles/large_lightbox/hash/68/d1/68d11ab242d40c8d5abbe8edb58fd4ed_0.jpg?itok=M3qtK47_",
        width: "200",
        height: "200"
    }];

    var preBuffer = [];
    for (var i = 0, j = theImages.length; i < j; i++) {
        preBuffer[i] = new Image();
        preBuffer[i].src = theImages[i].src;
        preBuffer[i].width = theImages[i].width;
        preBuffer[i].height = theImages[i].height;
    }

    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    window.getRandomImage = function () {
        var whichImage = getRandomInt(0, preBuffer.length - 1);
        return preBuffer[whichImage];
    }
})();

window.onload = function () {
    var newImage = getRandomImage();
    console.log(newImage);
    document.body.appendChild(newImage);
};

演示：http: //jsfiddle.net/wFjGv/

此代码使用一个新对象来保存每个图像的详细信息。这样，您可以轻松设置和获取所需的每个图像的属性，而无需对 HTML 进行硬编码。

它预加载preBuffer数组中的图像，并在需要时从数组中检索图像，并将其放入<body>. onload您可以在事件中更改其目标。该getRandomImage函数从该数组中返回一个随机图像。我也更新了获取随机整数的方法。

于 2013-04-19T14:50:16.423 回答
0

你正在设置一个<img src=不是你想要的东西。您的数组 ( theImages) 正在存储完整<img>的标签，而不仅仅是指向该图像的链接。

要么改变你theImages的数组来存储像这样的值：

theImages[0] = "/content/dam/atvi/callofduty/blackops2/cod-bo2/dlc/mdlc-calling-card-flags.png"

或使用当前设置作为图像标签。

document.write(theImages[whichImage]);

还：

  • 对于随机数，您可能应该坚持使用，Math.floor()以免超过最大长度。

  • var j = 0缺少一个;

  • theImagesimg 标签未关闭 (<img ... />

于 2013-04-19T14:53:17.290 回答
0

尝试这个-

var srcs = [
    "/content/dam/atvi/callofduty/blackops2/cod-bo2/dlc/mdlc-calling-card-flags.png",
    "/content/dam/atvi/callofduty/blackops2/cod-bo2/dlc/mdlc-nuketown-zombies.png",
    "foo/bar.jpg"
    ], imgs = [];
function init() {
    "use strict";
    var i, x, div;
    div = document.createElement('div');
    div.id = 'imageContainer';
    document.querySelector('body').appendChild(div);
    for (i = 0; i < srcs.length; i += 1) {
        x = new Image();
        x.src = srcs[i];
        imgs.push(x);
    }
}
function showRandom() {
    "use strict";
    document.querySelector('#imageContainer').innerHTML = imgs[Math.random * imgs.length];
}
init();

添加随机图像-

showRandom();

PS - 你不应该使用document.write，但如果你这样做，你应该关闭流document.close，告诉浏览器完成加载页面。阅读更多 - MDN JS 文档

于 2013-04-19T15:01:31.030 回答