javascript - 在 Javascript 中动态设置(当前为静态)图像数组

Question

我想通过javascript和js文件实现图片幻灯片，其中幻灯片包含top4图片。

我在图像数组包含静态图像的地方使用了脚本。

我想通过从 index.aspx.cs 文件中找到我的图像名称来动态转换它存储在隐藏字段中。如何检索这些隐藏字段并将它们添加到图像数组？

<script type="text/javascript">
var mygallery2=new fadeSlideShow({
 wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
 dimensions: [568, 313], //width/height of gallery in pixels. Should reflect dimensions of largest image
 imagearray: [
  ["images/1.jpg", "", "", ""],
  ["images/2.jpg", "", "", ""],
  ["images/3.jpg"],
  ["images/4.jpg", "", "", ""] //<--no trailing comma after very last image element!
 ],
 displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
 persist: false, //remember last viewed slide and recall within same session?
 fadeduration: 500, //transition duration (milliseconds)
 descreveal: "always",
 togglerid: "fadeshow2toggler"
})
 </script>

上面的脚本有静态图像的图像数组。我想通过查找隐藏字段值使其像第一个脚本中那样动态生成。

我该怎么做。

我的 javascript 很差。请帮助我

Answer 1

在给定的脚本执行之前，您可以创建一个包含脚本名称的 Javascript 数组，但是是合适的，例如:

var myImages = [];
var hiddenElements = getMyHiddenElements();
for (int i = 0; i < hiddenElements.length; i++)
{
   myImages[myImages.length] = hiddenElements[i].value;
}

然后当您创建 fadeSlideShow 时，您可以传入这个数组而不是创建一个内联数组:

var mygallery2=new fadeSlideShow({
 ...
 dimensions: [568, 313], //width/height of gallery in pixels
 imagearray: myImages,
 ...

这将使用您之前为图像源创建的数组。 (请注意，根据您的代码片段，您可能需要将其设为包含标题/字幕的二维数组，但原理保持不变。预先创建数组作为标准 Javascript变量，基于您的隐藏字段，然后将其传递到幻灯片构造函数)。

请注意，从隐藏字段中提取信息听起来并不是实现此功能的最简洁方法。您可能会发现，如果您动态生成页面，实际上简单地使用 Javascript 数组声明直接生成页面比添加隐藏字段然后在“运行时”通过 JS 将它们变成数组要容易得多。