How to make an array of images specifically in the same <ul>?

I am trying to make an image switcher for my portfolio site that is unique. To do this I think I need to be able to have an array of images that matches with the corresponding array of list items with the names of the projects they belong to, like this:

<ul>
<li><img src="1.png"></li>
<li><img src="2.png"><开发者_如何转开发/li>
<li><img src="3.png"></li>
</ul>

<ul>
<li>Project 1</li>
<li>Project 2</li>
<li>Project 3</li>
</ul>

So I guess I want the javascript to "think" like this: "Oh, img 2 is the second list item, if project 2 is clicked which is also the second list item, I should display img 2"

Ya digg?

Here is what I have so far, if you need a visual: http://addproxy.net/sites/img_switcher/index.html

In jQuery, you could do it like this:

HTML:

<ul id="images">
    <li><img src="http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg"></li>
    <li><img src="http://photos.smugmug.com/photos/344290962_h6JjS-Ti.jpg"></li>
    <li><img src="http://photos.smugmug.com/photos/344290837_ypsKL-Ti.jpg"></li>
</ul>

<ul id="projects">
    <li>Project 1</li>
    <li>Project 2</li>
    <li>Project 3</li>
</ul>

javascript:

$("#projects li").click(function() {
    var pos = $(this).parent().children().index(this);
    var $images = $("#images li");
    $images.hide();  // hide previous images
    $images.eq(pos).show();
});

And, you can see it work here: http://jsfiddle.net/jfriend00/gV2NH/.

If you can't use jQuery, then the general idea is that you set up a click handler for each project. When one of them is clicked on, you get the parent and get it's children (which will be a list of all the project li tags). You then see which one the click happened on so now you have the sequence number. You can then use that sequence number to show just the right image from the other list.