有没有办法简化没有PHP的100+图像阵列?

时间:2015-12-22 03:34:32

标签: javascript arrays image

为了记录,我在Java方面还不是很好,我刚刚开始使用它。目前,我正在开发一个小型个人项目,该项目会在转换到另一个文件夹之前随机显示文件夹中的图像5秒钟。我想添加尽可能多的图像,但是一旦我创建了超过100个对象的数组,管理它以及文件变得非常繁琐,特别是如果我想开始重新排列文件或添加/删除一些。

我已经不得不开始将文件重命名为连续数字以使随机循环工作,这本身就是一件苦差事,所以我很好奇是否有办法解决问题。至少缩短数组并让它循环遍历文件。或者可能有一个更简单的解决方案,根本不需要数组,因为文件按顺序用数字命名。

到目前为止,这是代码的样子:

var delay=5000 //set delay in miliseconds
var curindex=0

var randomimages=new Array()

    randomimages[0]="1.png"
    randomimages[1]="2.jpg"
    randomimages[2]="3.png"
    randomimages[3]="4.png"
    randomimages[4]="5.png"
    randomimages[5]="6.png"
    randomimages[6]="7.png"
    randomimages[7]="8.jpg"
    randomimages[8]="9.png"
    randomimages[9]="10.png"
    // Cut out the 100 extra lines
    // Continues like this for multiple lines and variates between PNG and JPG images
    randomimages[103]="104.jpg"

var preload=new Array()

for (n=0;n<randomimages.length;n++)
{
    preload[n]=new Image()
    preload[n].src=randomimages[n]
}

document.write('<div><img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'"></div>')

function rotateimage()
{

if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex

    document.images.defaultimage.src=randomimages[curindex]
}

setInterval("rotateimage()",delay)

感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

试试这段代码:

var delay = 5000, //set delay in miliseconds
    count = 104,
    curindex = Math.floor(Math.random() * count),
    preload = [],
    img;
for (var n = 1; n <= count; n++) {
    img = new Image();
    img.src = n + '.png';
    preload.push(img);
}

document.write('<div><img name="defaultimage" src="' + (curindex + 1) + '.png"></div>')

function rotateimage() {
    var tempindex = Math.floor(Math.random() * count);
    if (curindex === tempindex) {
        curindex = (curindex === 0 ? 1 : curindex - 1);
    } else {
        curindex = tempindex;
    }
    document.images.defaultimage.src = (curindex + 1) + '.png';
}

setInterval("rotateimage()", delay);

没有必要像你说的那样拥有阵列。