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

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