javascript changing between three images on a button click
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;script&gt;
            var trafficlights = ['redlight.png','yellowlight.png','greenlight.png'];
            var num = 1

            function lightsequence() {
                document.getElementById('light').src = trafficlights[num];
                num = num + 1;
            }
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;img id="light" src="redlight.png"&gt;
        &lt;button onclick="lightsequence()"&gt;Change Lights&lt;/button&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>I have written that piece of code and the images change in order one by one each time I click the button but I cannot think of how to reverse the order if I keep clicking, i.e. traffic lights red yellow green yellow red etc. each time I click. I am unfamiliar with jQuery so would like to not use them ideally but if someone can explain it fully with jQuery in working it will have to do.</p>