List of links pulled from a jQuery array
<p>I'm using an array of images with next/previous functions to navigate through the images. I'd also like to have an unordered list of the individual images so users can click on a specific one, but I'm not sure how to implement it. I could link the images directly, but I'm not sure how to have them show up where the others do when next/previous is clicked.</p>

<p>Array:</p>

<pre><code>var myImg= new Array()
  myImg[0]= "Home";
  myImg[1]= "Solutions";
  myImg[2]= "About";
  myImg[3]= "Careers";
  myImg[4]= "Contact";

myImgSrc = "images/";
myImgEnd = ".png"
var i = 0;

function loadImg(){
  document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd;
}

function prev(){
  if(i&lt;1){
    var l = i
  } else {
    var l = i-=1;
  }
  document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
}

function next(){
  if(i&gt;3){
    var l = i
  } else {
    var l = i+=1;
  }
  document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
}

window.onload=loadImg;
</code></pre>

<p>Markup:</p>

<pre><code>&lt;div id="top"&gt;
&lt;div class="box"&gt;
&lt;p class="l"&gt;&lt;a href="#" onClick="prev();"&gt;&amp;laquo; Previous Image&lt;/a&gt;&lt;/p&gt;

&lt;ul id="list"&gt;
&lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Solutions&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Careers&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p class="r"&gt;&lt;a href="#" onClick="next();"&gt;Next Image &amp;raquo;&lt;/a&gt;&lt;/p&gt;

&lt;div class="clear"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div id="container"&gt;

&lt;div id="image"&gt;
&lt;img name="imgSrc" id="imgSrc" /&gt;
&lt;/div&gt;

&lt;/div&gt;
</code></pre>
