脚本从数组中随机生成图片和文本

Question

我基本上试图设置它，以便当我点击我的网站上的按钮时，页面刷新从数组随机一块文本和随机图像来自一个数组。我已经把文本部分放下了，但是需要知道如何去做图片部分。这是我现在使用的文本生成脚本：

<script language="JavaScript"> 
var r_text = new Array(); 
r_text[0] = "You'll want to track-change your life"; 
r_text[1] = "A misplaced comma can get you fired"; 
r_text[2] = "Work-life balance? Ha!"; 
r_text[3] = "Even the bankers laugh at you"; 
r_text[4] = "There's a gym so you can't leave the building"; 
r_text[5] = "Student debt can't be discharged"; 
r_text[6] = "Sallie Mae becomes one of your biggest contacts"; 
r_text[7] = "Good luck with partner track"; 
r_text[8] = "There are no lifestyle firms"; 
r_text[9] = "Your soul will die"; 
r_text[10] = "Socratic Method? More like Suck-ratic Method"; 
r_text[11] = "So much paper. You'll be destroying rainforests"; 
var i = Math.floor(12*Math.random()) 
document.write(r_text[i]); 
</script> 

上我能做些什么来获得图像，这里的任何想法？

Answer 1

只是把IMG标签在同一阵列中，因此它与文字混合：

.... 
r_text[12] = "<img src='1.gif' />"; 
r_text[13] = "<img src='2.gif' />"; 
... 

等....

Answer 2

var r_images = new Array(); 
r_images[0] = "a.jpg"; 
r_images[1] = "b.jpg; 
. 
. 
. 


var i = Math.floor(12*Math.random()) 
document.write(r_text[i]); 
document.write("<img src='"+images_folder+r_images[i]+"' />"); 

Answer 3

你可以做一个形象是一回事吗？

var imageNames = ['life', 'fired', 'balance', 'bakers', 'gym'] 
var i = Math.floor(5*Math.random()) 
document.write("<img src='http://path/to/your/image/" + imageNames[i] + ".jpg'>"); 

Answer 4

一套用于图像的文件夹，并给他们随机名称起12,13,14 .......比同样喜欢文字

var i = Math.floor(24*Math.random()) 
document.write("<img src='folder-path/" + r_text[i] + ".jpg'>"); 

Answer 5

我意识到这是一个老帖子，但对于未来的读者，可以考虑代替document.write使用innerHTML也是我建议改变var i = Math.floor(12*Math.random())到var i = Math.floor(r_text.length * Math.random());这样你添加你不必再担心换号旁边*Math.random())

此电子邮件更多图片xample我已经使用了数组对象，以便您可以轻松地为每个图像定义替代文本（针对这些验证粘贴者）。

对于任何人都关心的一个工作示例：

http://jsfiddle.net/GmZPe/3/

HTML

<div id="container"></div> 

JS

var r_img = []; 
r_img[0] = { 
    source: 
     "image01.png", 
    altText: 
     "image 01" 
}; 
r_img[1] = { 
    source: 
     "image02.png", 
    altText: 
     "image 02" 
}; 
r_img[2] = { 
    source: 
     "image03.png", 
    altText: 
     "image 03" 
}; 

var i = Math.floor(r_img.length * Math.random()); 
var s = "<img src='http://tinyurl.com/ky3nmqp/" + r_img[i].source + "' alt='" + r_img[i].altText + "'>"; 
document.getElementById('container').innerHTML = s; 

---

或者，如果你愿意，我们可以把它包在一个函数在事件发生时调用它：

http://jsfiddle.net/GmZPe/4/

HTML

<div id="container"></div> 
<button onclick="myFunction()">Click me</button> 

JS

function myFunction() { 
    var r_img = []; 
    r_img[0] = { 
     source: 
      "image01.png", 
     altText: 
      "image 01" 
    }; 
    r_img[1] = { 
     source: 
      "image02.png", 
     altText: 
      "image 02" 
    }; 
    r_img[2] = { 
     source: 
      "image03.png", 
     altText: 
      "image 03" 
    }; 

    var i = Math.floor(r_img.length * Math.random()); 
    var s = "<img src='http://tinyurl.com/ky3nmqp/" + r_img[i].source + "' alt='" + r_img[i].altText + "'>"; 
document.getElementById('container').innerHTML = s; 
}