在javascript中显示数组中的随机图像

时间:2012-12-22 16:06:19

标签: javascript html

我想从imgArray中选择随机图像同时打印16个不同的图像,但无法填充imgRandom函数。

img = new imgArray(7);
img[0]='1.png';
img[1]='2.png';
img[2]='3.png';
img[3]='4.png';
img[4]='5.png';
img[5]='6.png';
img[6]='7.png';
img[7]='8.png';

var rand=imgArray[math.floor(math.random*imgArray.length)];

function imgRandom(){

}

3 个答案:

答案 0 :(得分:7)

尝试此功能

function getRandomImage(imgAr, path) {
    path = path || 'images/'; // default path here
    var num = Math.floor( Math.random() * imgAr.length );
    var img = imgAr[ num ];
    var imgStr = '<img src="' + path + img + '" alt = "">';
    document.write(imgStr); document.close();
}

调用函数

getRandomImage(ARRAY-VARIABLE, '/images/')

参考 LIVE DEMO 。每次刷新都会看到图像的变化

答案 1 :(得分:2)

使用以下代码:

var imgArray = ['1.png', '2.png', '3.png', '4.png', '5.png', '6.png', '7.png', '8.png'];
var basePath="YOUR_FOLDER_PATH_HERE";

function imgRandom() {
    for (var i = 0; i < 18; i++) {
        var rand = imgArray[Math.floor(Math.random() * imgArray.length)];
        var image = new Image();
        image.src = basePath+rand;
        document.body.appendChild(image);
    }
}

Live Demo | Source

答案 2 :(得分:2)

我想在您的代码中指出一些内容

  • 默认情况下javascript中没有imgArray(也许是你的构造函数)
  • 您需要Array

  • Javascript是大小写敏感的,js中的Math对象有一个大写字母M

    • math - &gt; Math
  • 必须调用random对象的Math属性才能返回一个随机数
    • random - &gt; random()
    • Math.random()

但是你的问题

  1. 函数接受参数,因此可以为图像数组采用一个参数

    function (imgArr) {...
    通过此操作,您可以通过imgArr

  2. 访问传递的参数
  3. 函数可以返回值,因此Math.random我们可以继续

    function(imgArr){     return imgArr [Math.floor(Math.random()* imgArr.length)] }

  4. 你不需要“Dim”数组,并预定义你要放入的元素,你可以做某事。像

    var imgArr = ["img01.png","img02.png",...]
    var arr=[]等于var arr = new Array()

  5. 所以用你的数组调用这个函数就像


  6.   var img = ["1.png", "2.png", "3.png", "4.png", "5.png", "6.png", "7.png", "8.png"]
         function imgRandom(imgArr) {
            return imgArr[Math.floor(Math.random() * imgArr.length)];
        }
     console.log(imgRandom(img));