Question

正如标题所示，我正试图弄清楚如何在我的网页中调用这个javascript函数。这是我的业务，模板只是一个基本的免费模板。我确信对于比我更有经验的人来说，这可能只是一个简单的格式化问题。这就是我正在使用的。

网页HEAD部分的代码：

var theImages = new Array() 
theImages[0] = 'splash1.jpg'
theImages[1] = 'splash2.jpg'
theImages[2] = 'splash3.jpg'
theImages[3] = 'splash4.jpg'
theImages[4] = 'splash5.jpg'
theImages[5] = 'splash6.jpg'

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]+'">');
}

</script>

现在调用我使用的函数：

<SCRIPT LANGUAGE="JavaScript">
showImage();
</script>

这是我正在尝试实现它的页面： http://coloradopp.com/index4.html

我不想只显示图像，而是想调用该功能。 Splash 1-6的大小与原始图像的大小相同。

以下是代码段：

<div id="splash">
<img class="pic" src="images/splash1.jpg" width="870" height="374" alt="" />
</div>

您可以在样式表（style.css）上告诉所有格式的页面调用。

任何人都可以提供有关如何使这项工作的任何提示吗？从我收集的内容来看，无法将javascript实现为css表。提前谢谢。

Answer 1

做这样的事情：

showImage() {
  var theImages = [ 'splash1.jpg', 'splash2.jpg', 'splash3.jpg', 'splash4.jpg', 'splash4.jpg' ];
  var img = theImages[Math.round(Math.random() * (theImages.length - 1))];
  document.getElementById('splash').innerHTML = '<img src="' + img + '">');
}

Answer 2

首先将您的javascript代码移动到函数中：

function showImage(){ ...your code goes here...}

然后你可以像这样启动页面加载功能：

<body onload="showImage()">

Answer 3

您可以将图像动态设置为背景图像，并放置类似这样的内容

<script>
document.write('<style>#splash{ background-image:url(\'images/splash'+Math.round(Math.random()*5+1)+'.jpg\');}</style>');
</script>

在页面的头部。使用此解决方案，您必须为div标签设置固定尺寸（870x374）

基于CSS的页面中的Javascript随机图像生成器

3 个答案: