0

我有这段代码，用于更改随机重新加载的每个页面上显示的图像。我在 JavaScript 方面不是很有经验，所以有人可以帮我让这段代码在重新加载时按顺序而不是随机更改图像吗？

这是代码：

function showImage(){
    var theImages = new Array()

    theImages[0] = '100.jpg'
    theImages[1] = '200.jpg'
    theImages[2] = '300.jpg'
    theImages[3] = '400.jpg'
    theImages[4] = '500.png'

    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('<img src="'+theImages[whichImage]+'">');
}

然后我简单地用这个来调用身体中的图像：

showImage();
4

3 回答 3

2

这将按顺序显示它们，并在它们全部完成后从头开始重复。

(function(){
    var list = [
            "100.jpg",
            "200.jpg",
            "300.jpg",
            "400.jpg",
            "500.jpg"
        ],i = localStorage.image || 0;
    document.write('<img src="'+list[i]+'"/>');
    i++;
    i%=list.length;
    localStorage.image = i;
})();

这是一个 jsfiddle：http: //jsfiddle.net/J9gAD/

没有人（jsbin、jsfiddle、codepen）似乎支持 document.write，这是可以理解的，所以 fiddle 展示了如何更改 img 标签的 src 值而不是原位写入元素。

要使用 HTML 内容（在 div 中）执行此操作... http://jsfiddle.net/J9gAD/2/

于 2013-04-28T05:51:41.850 回答
0

如果您希望它们在页面重新加载时按顺序显示（这有点奇怪，但没关系），您需要将索引传递给 url，所以类似于

function showImage(){
    var theImages = new Array()

    theImages[0] = '100.jpg'
    theImages[1] = '200.jpg'
    theImages[2] = '300.jpg'
    theImages[3] = '400.jpg'
    theImages[4] = '500.png'

    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 index = location.hash || 0;
    if (index >= p) index = 0;

    var img = document.createElement('img'); 
    img.src = theImages[index];

    //replace document.body here with a reference to where you want the image to go
    document.body.appendChild(img); 
    location.hash = index++;
}

如果您将 location.hash 用于其他事情，则必须对其进行一些手动解析，这并不难。

于 2013-04-28T05:33:45.373 回答
0

您的脚本中有两个 showImage 函数......这是不对的。但是要让它们按顺序显示，只需在 for 循环中使用 theImages[i] ，然后去掉随机位。除非你们两个，在这种情况下，做两个函数：一个是随机的，一个是顺序的。像 showImageRandom() 和 showImage()。

于 2013-04-28T05:39:52.023 回答