JavaScript image slider/catalog

Question

So i'm trying to make a simple image "catalog" where i can cycle through some images. Here's the code: http://pastebin.com/raw/NDh4VBtz Im facing two problems at this moment:

• 1. How to make the buttons which i'm using to move forward after the 1st press. Example: I have 3 images (IMG1, IMG2, IMG3). I want to use them as follows. I press button "Next image": IMG1 -> IMG2. I press said button again: IMG2 -> IMG3. If i press "Previous image": IMG3 -> IMG2. At this point i've made it so it would work the first time when i press "Next image" or "Previous image".
• 2. How to store image position so that when i call the function again, it wouldn't lose the value. I'm using onclick event - onclick="imagesS('Image', 'Text', Images, -1)". Image = imageID, Text = textID, Images = image array, -1 = direction.

JavaScript part of the file:

 <script type="text/javascript">
     var Images = 
        new Array("first.jpg", "second.jpg", "third.jpg", 0)

     function imagesS(ImageId, TxtId, ImageArr, Direction) {
            IndPos = 0;
            if (Direction == "+1"){
                IndPos += 1;
                if (ImageArr.length == IndPos) {
                    alert("Last photo!");
                } else {
                    document.getElementById(ImageId).src= ImageArr[IndPos];
                    document.getElementById(TxtId).innerHTML = "Text: <i>" + ImageArr[IndPos] + "</i>";
                }
            }   else if (Direction == "-1"){
                    IndPos -= 1;
                    if (IndPos == "0" || IndPos == "-1"){
                        alert("Can't do that!");
                    }   else {
                    document.getElementById(ImageId).src= ImageArr[IndPos];
                    document.getElementById(TxtId).innerHTML = "Text: <i>" + ImageArr[IndPos] + "</i>";
                    }
                }

     } 

Answer 1

也许这样的事情对您有用： imageCatalog