Question

我有这个代码，用于更改每个页面上显示的图像随机重新加载。我在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();

Answer 1

这将按顺序显示它们，并在它们一直通过时重复开始。

(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，这是可以理解的，所以小提琴演示了如何更改img标签的src值而不是编写insitu元素。

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

Answer 2

如果你希望它们在页面重新加载时按顺序显示（这有点奇怪，但没关系），你需要将索引传递给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进行其他操作，则必须对其进行一些手动解析，这并不是很难。

Answer 3

你的脚本中有两个showImage函数......哪个不对。但要让它们按顺序显示，只需在for循环中使用Images [i]，然后摆脱随机位。除非你们两个，在这种情况下，制作两个函数：一个用于随机，一个用于订单。像showImageRandom（）和showImage（）。

如何随机进入订单Javascript？

3 个答案: