How to click through images stored in var in javascript
<p>I need to on the click of the first image, for it to switch to the second image, and then on the click of that to switch to the third image and so on and so on.</p>

<p>I have this so far, and it only goes to the second image and stops there, or goes instantly to the third...</p>

<pre><code>&lt;img id="imgClickAndChange" class="art_shop" name="pic"     src="images/edited_images/1.jpg" style="display: none;"     onClick="changeImage();changeImageAgain();"&gt;

&lt;script language="javascript"&gt;
function changeImage() {

    if (document.getElementById("imgClickAndChange").src =     "images/edited_images/1.jpg") 
    {
        document.getElementById("imgClickAndChange").src =     "images/edited_images/2.jpg";
    }
}
&lt;/script&gt;

&lt;script language="javascript"&gt;
function changeImageAgain() {
if (document.getElementById("imgClickAndChange").src ==           "images/edited_images/2.jpg") 
    {
    document.getElementById("imgClickAndChange").src =           "images/edited_images/3.jpg";
    }

}
&lt;/script&gt;
</code></pre>

<p>I have also this example, which i pulled from another thing i did a while ago. It's an image slider, with the images already stored in the header, and they load the new image in every X seconds. Is there any way to modify this to load the next image on the click of a button (or the image itself) as opposed to it being timed? Either solution would work. Thanks</p>

<pre><code>&lt;head&gt;
    &lt;script type="text/javascript"&gt;
var slideimages = new Array() // create new array to preload images
slideimages[0] = new Image() // create new instance of image object
slideimages[0].src = "images/edited_images/1.jpg" // set image src property         to image path, preloading image in the process
slideimages[1] = new Image()
slideimages[1].src = "images/edited_images/2.jpg"
slideimages[2] = new Image()
slideimages[2].src = "images/edited_images/3.jpg"
slideimages[3] = new Image()
slideimages[3].src = "images/edited_images/4.jpg"
&lt;/script&gt;
&lt;/head&gt;


&lt;img id="imgClickAndChange" class="art_shop" name="pic"     src="images/edited_images/1.jpg" style="display: none;"     onClick="changeImage();changeImageAgain();"&gt;


&lt;script type="text/javascript"&gt;

//variable that will incement through the images

var step=0

function slideit(){
if (!document.images)
    return
document.getElementById('imgClickAndChange').src = slideimages[step].src
if (step&lt;1)
    document.getElementById('imgClickAndChange').src = slideimages[step].src
if (step&lt;2)
    document.getElementById('imgClickAndChange').src = slideimages[step].src
 if (step&lt;3)
    step++
 else
    step=0
setTimeout("slideit()",1000)
}

slideit()

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