页面加载时显示随机图像并带有关联的文本标题答案

【问题标题】：Display random image when page loads with associated text title页面加载时显示随机图像并带有关联的文本标题
【发布时间】：2018-04-17 10:11:56
【问题描述】：

我正在尝试创建一段相当简单的 JavaScript，它在每次页面加载时显示来自数组的随机图像，然后显示关联的文本块作为每张图片的标题。我需要想出一种方法来让它运行而不向 body 标记添加代码。有没有办法在没有 onload 函数的情况下完成这个？

这是我依赖 onLoad 的内容：

<html>
<head/>
<title>Test</title>
<script type="text/javascript">
  var imageUrls = [
       "http://ww.example.com/image-01.jpg"
     , "http://ww.example.com/image-02.jpg"
     , "http://ww.example.com/image-03.jpeg"
  ];
 var imageLinks = [
       "http://ww.example.com/yoga/"
     , "http://ww.example.com/self-hypnosis/"
     , "http://ww.example.com/herbalism/"
  ];
 var imageText = [
       "Click here to enjoy your Yoga class."
     , "Click here to enjoy your Self-Hypnosis class."
     , "Click here to enjoy your Herbalism class."
  ];

  function getImageHtmlCode() {
    var dataIndex = Math.floor(Math.random() * imageUrls.length);
    var img = '<a href=\"' + imageLinks[dataIndex] + '"><img src="';        
    img += imageUrls[dataIndex];
    img += '\" alt=\"Some alt text\"/></a>';
    return img;
  }
</script>
</head>
<body bgcolor="white">
<script type="text/javascript">
  document.write(getImageHtmlCode());
</script>
</body>
</html>

【问题讨论】：

标签： javascript html

【解决方案1】：

如果你想在图片下方显示文字，只需添加一个跨度：

    <html>
<head>
<title>Test</title>
<script type="text/javascript">
    var imageUrls = [
        "http://ww.example.com/image-01.jpg"
      , "http://ww.example.com/image-02.jpg"
      , "http://ww.example.com/image-03.jpeg"
    ];
    var imageLinks = [
        "http://ww.example.com/yoga/"
      , "http://ww.example.com/self-hypnosis/"
      , "http://ww.example.com/herbalism/"
    ];
    var imageText = [
        "Click here to enjoy your Yoga class."
      , "Click here to enjoy your Self-Hypnosis class."
      , "Click here to enjoy your Herbalism class."
    ];

    function getImageHtmlCode() {
      var dataIndex = Math.floor(Math.random() * imageUrls.length);
      var img = '<a href=\"' + imageLinks[dataIndex] + '"><img src="';        
      img += imageUrls[dataIndex];
      img += '\" alt=\"Some alt text\"/></a><span>';
      img += imageText[dataIndex];
      img += '</span>'
      return img;
    }
</script>
</head>
<body bgcolor="white">
<script type="text/javascript">
  document.write(getImageHtmlCode());
</script>
</body>
</html>

这是一个 jsfiddle：https://jsfiddle.net/56351syn/11/

【讨论】：