循环浏览javascript中的图像

时间:2012-06-15 19:53:29

标签: jquery arrays

我有一个插件围绕一组图像旋转360度(准确地说是300)。我想知道我是否可以使用for循环或for循环遍历所有图像。现在它就像这样设置。

$("#spin").spritespin({
        width     : 510,
        height    : 327,
        frames    : 10,
        image     : [
                "360rotation/000.jpg",
                "360rotation/001.jpg",
                "360rotation/002.jpg",
                "360rotation/003.jpg",
                "360rotation/004.jpg",
                "360rotation/005.jpg",
                "360rotation/006.jpg",
                "360rotation/007.jpg",
                "360rotation/008.jpg",
                "360rotation/009.jpg",
                  ],

        animate   : true,
        loop      : true,
        frameTime : 60,
        fadeFrames : 20,
        fadeInTime : 0,
        fadeOutTime : 120
      });

这有效,但我不想输出所有300张图像。我怎么能更快地做到这一点?

2 个答案:

答案 0 :(得分:2)

我想,最简单的方法是根据已知的开始填充数组,并结束图像:

function namePad(num){
    if (num < 10){
        return '00' + num;
    }
    else if (num >=10 && num < 100){
        return '0' + num;
    }
    else {
        return num;
    }
}

var imageArray = [];

for (var i=0; i < 300; i++){
    imageArray.push('360rotation/' + namePad(i) + '.jpg');
}

JS Fiddle proof of concept

答案 1 :(得分:0)

也许像

var images = new Array();

for (i = 0; i < (n = 301); i++) {
  images.push("360rotation/00" + i + ".jpg")
}

$("#spin").spritespin({
    width     : 510,
    height    : 327,
    frames    : 10,
    image     : images,

    animate   : true,
    loop      : true,
    frameTime : 60,
    fadeFrames : 20,
    fadeInTime : 0,
    fadeOutTime : 120
  });