如何使此JavaScript幻灯片有效？

Question

I am trying to create an image slideshow. I added the 7 images into the array. The slideshow starts with image0.jpg and when the user clicks on the right arrow, I want the javascript to insert the next image in the array (image1.jpg). The problem is that the img variable is not going past 1. Can someone help me get this slideshow to work?

HTML

    <h1>Swap Image Experiment</h1>
    <div class="slideshow">
        <div id="myImages">
            <img id="test" src="images/image0.jpg">
        </div>
        <div class="arrows"> 
            <div id="left"  onClick="swapPicture(-1)"></div>
            <div id="right" onClick="swapPicture(+1)"></div>
        </div>
    </div>
    <script src="js/script.js"></script>
</body>

JavaScript

var dImages = new Array();
var numImages = 6;

for(i=0;i<numImages;i++)
{
    dImages[i]=new Image();
    dImages[i].src="images/image"+(i)+".jpg";
}

function swapPicture(target) {
    img = 0;
    image = document.getElementById("test")
    img = img + target;
    console.log(img);
    image.src = "images/image"+(img)+".jpg";
}

Answer 1

You should change img from a local variable to a global variable. Now every time when you execute that function, img will be set to 0. So change it to

var img = 0;
function swapPicture(target) {
    image = document.getElementById("test")
    img = img + target;
    console.log(img);
    image.src = "images/image"+(img)+".jpg";
}

Answer 2

Along with Dacaspex answer, you should remember to loop back to pic 5 (assuming 0-5 for your 6 images) if they go left instead of right. Also to loop to 0 if they go right when at 5...

var img = 0;
function swapPicture(target) {
    image = document.getElementById("test")
    img = img + target;
    console.log(img);
    if(img < 0)
    {
       img = 5;
    }
    else
    {
       if(img > 5)
       {
          img = 0;
       }
    }
    image.src = "images/image"+(img)+".jpg";
}