Trying to create a simple slide show method in Javascript

I am trying to create basic JavaScript cut off for image slides back and forth on a web page when clicking links.

Here is my js code in the <head>webpage section :

<script type="text/javascript">

   //if browser does noe support getElementbyId then exit
   var step = 1;
   if ( !document.getElementById ) {
       return;
   }
   var src = 'images/gallery_images/image'+step+'.jpg';
   document.getElementById('photos').src = src;

   function slideForward()
   {
        //files are named as image1, image2....
        step++;
        var src = 'images/gallery_images/image'+step+'.jpg';
        document.getElementById('photos').src = src;
   }

   function slideBack()
   {
       step--;
       var src = 'images/gallery_images/image'+step'.jpg';
       document.getElementById('photos').src = src;
   }
</script>

I am linking 2 functions to move back using onclickin the tag, for example:

<a onclick="slideBack()">
    <img src="images/gallery_06.jpg" alt="" name="left" width="26" height="90" id="gallery_06" />
</a>
<a onclick="slideForward()">
    <img src="images/gallery_07.jpg" alt="" name="right" width="27" height="90" id="gallery_07" />
</a>

Any suggestions on what I'm missing? Nothing returns.

+1
source share

All Articles