Question

我遇到了需要帮助的问题。我已经做了大约半天的工作了。我是一名仍在学校的新软件开发人员。

我一直在尝试生成一个随机数，用作imageTabsList节点列表的索引，然后使用getAttribute（）方法从我的HTML文件中获取longdesc属性的值，该文件的图像路径源写入longdesc属性低于我的循环。因此，每次重新加载页面时，都会显示一个新图像。我的问题是如何在我的.js文件中完成此操作

var ImagePicker = {

      init: function() {

    imagePic = document.getElementById('pic');

    imageTabsDiv = document.getElementById('imageTabs');

    imageTabList = imageTabsDiv.getElementsByTagName('img');

    for(var i =0; i <imageTabList.length; i++) {

      imageTabList[i].onclick = imageTabList.imageTabClick 

      function imageTabClick() {

        imagePath = this.getAttribute('longdesc');

        imagePath.src = imagePic;

      };

    };

  randomIndex = imageTabList[randomPics];

  randomIndex = imageTabsDiv.getAttribute('longdesc');

  randomIndex.src = imagePic;

  randomPics: function() {

    return Math.floor(Math.random() + 1);

  };

  };

};

Core.start(ImagePicker);

我正在引用HTML文件的代码...

<div id="primaryPic">
                    <img src="images/pics/primaryPic.png" id="pic" alt="Primary Content Picture">

                    <div id="imageTabs">
                        <img src="images/pics/imageTab01.png" id="imageTab01" alt="imageTab01" longdesc="images/pics/bavLine.png"><br>
                        <img src="images/pics/imageTab02.png" id="imageTab02" alt="imageTab02" longdesc="images/pics/frenchBugler.png"><br>
                        <img src="images/pics/imageTab03.png" id="imageTab03" alt="imageTab03" longdesc="images/pics/Gendarme_a_Cheval_1870.png"><br>
                        <img src="images/pics/imageTab04.png" id="imageTab04" alt="imageTab04" longdesc="images/pics/primaryPic.png">
                    </div>
                </div>

我试图引用longdesc属性来在每次重新加载页面时更改图片。

Answer 1

要从imageTabList随机选择图像，您可以执行以下操作：

var randomImg = imageTabList[Math.floor(Math.random() * imageTabList.length)];

要在每次加载页面时获得随机longDesc属性，您可以使用以下代码：

var imgs = document.getElementById("imageTabs").document.getElementsByTagName("img");
var randomImg = imgs[Math.floor(Math.random() * imgs.length)]
var randomLong = randomImg.getAttribute("longdesc");

仅供参考，您应该在属性中使用data-longdesc="xxxx"以获得HTML5兼容性。

以下是解释：

Math.random()

在0和1之间创建一个随机浮点数（包括0，不包括1），例如0.4857462391。

Math.random() * imageTabList.length

在0和imageTabList.length之间创建一个随机浮点数（包括0，不包括imageTabList.length等8.239824379。

要使该值为整数（对于数组索引），我们在其上调用Math.floor()，如下所示：

Math.floor(Math.random() * imageTabList.length)

现在你有一个介于0和imageTablList.length之间的随机整数 - 1，你可以用来从该NodeList中抓取一个随机项。

如果您需要任何进一步的帮助，请显示您的HTML，因为您的代码不太明确您要做的事情。

如何使用NodeList显示随机图片？

1 个答案: