Dynamically setting (currently static) image array in Javascript

问题

I want to implementa slideshow of images through javascript and js files, where the slideshow contains top4 images.

I used the script where the image array has static images.

I want to convert it dynamically by finding my images names from index.aspx.cs files which are stored in hidden fields. How do I retrieve these hidden fields and add them to the image array?

<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>

where above script have imagearray of static images. I want to make it dynamically as in 1st script by finding hidden field values.

How can I do this.

I am poor in javascript. Please help me

回答1:

Before the given script executes, you can create a Javascript array containing the names of your scripts however is appropriate, for instance:

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

Then when you create the fadeSlideShow, you can pass in this array instead of creating one inline:

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

This will use the array that you created earlier for the image sources. (Note that based on your snippet, you'll likely need to make it a two-dimensional array with what's probably titles/captions, but the principle remains the same. Create the array beforehand as a standard Javascript variable, based on your hidden fields, and then pass it in to the slideshow constructor).

Note that extracting information from hidden fields doesn't sound like the cleanest way to achieve this functionality. You may find that, if you're generating the page dynamically, it's actually easier to simply generate the page with a literal Javascript array declaration rather than adding hidden fields and then turning them into an array at "runtime" via JS.

回答2:

If you know the id of your hidden fields [hidden input boxes], then you can try this

imagearray: [
  [$("#id1").val(), "", "", ""],
  [$("#id2").val(), "", "", ""],
  [$("#id3").val()],
  [$("#id4").val(), "", "", ""] //<--no trailing comma after very last image element!
 ]

来源：https://stackoverflow.com/questions/4143073/dynamically-setting-currently-static-image-array-in-javascript