Javascript Sliding Images - How to add elements/classes

Question

I have this Javascript sliding image script. It works great, but I would like to add text in the form of a paragraph tag to the sliding effect, one paragraph accompanying each image in the slide. How to do that? My code:

<script language="JavaScript">
var image = new Array("images/ref1.png", "images/ref2.png", 
                "images/bb.png", "images/windows.png")
                var imgNumber=1     
                var numberOfImg = image.length                  

                function previousImage(){
                  if(imgNumber > 1){
                    imgNumber--
                    }

                  else{
                    imgNumber = numberOfImg
                    }

                  document.slideImage.src = image[imgNumber-1]                              
                  }

                function nextImage(){
                  if(imgNumber < numberOfImg){
                    imgNumber++
                    }

                  else{
                    imgNumber = 1
                    }

                  document.slideImage.src = image[imgNumber-1]  
                  }

                if(document.images){                                       
                   var image1 = new Image()                                        
                   image1.src = "images/ref1.png"
                   var image2 = new Image()
                   image2.src = "images/ref2.png"
                   var image3 = new Image()
                   image3.src = "images/bb.png"
                   var image4 = new Image()
                   image4.src = "images/windows.png"
                   }
</script>
<table>
        <tr>
          <td><img src="images/ref1.png" name="slideImage"></td>
        </tr>
        <tr>
          <td><a href="JavaScript:previousImage()">
          <img src="" border="none"/>prev</a>
          </td>
          <td><a href="JavaScript:nextImage()">
          <img src="" border="none" />next</a>  
          </td>
        </tr>
</table>

Thank You

Answer 1

Basically you just need to add an element to hold your text, an array that contains the text to rotate, and add a little JavaScript to make the changes.

Here's a jsFiddle example.

I added a new paragraph element with the ID of 'text' to your HTML, and in your JavaScript I created an array to hold the text. The text gets changed just like the images do using this line: document.getElementById('text').innerHTML = text[imgNumber - 1];.

JavaScript:

var image = new Array("http://www.dummyimage.com/60x60/&text=1", "http://www.dummyimage.com/60x60/&text=2", "http://www.dummyimage.com/60x60/&text=3", "http://www.dummyimage.com/60x60/&text=4");
var text = new Array('one', 'two', 'three', 'four');
var imgNumber = 1;
var numberOfImg = image.length;

function previousImage() {
    if (imgNumber > 1) {
        imgNumber--;
    }
    else {
        imgNumber = numberOfImg;
    }
    document.slideImage.src = image[imgNumber - 1];
    document.getElementById('text').innerHTML = text[imgNumber - 1];
}
function nextImage() {
    if (imgNumber < numberOfImg) {
        imgNumber++;
    }
    else {
        imgNumber = 1;
    }
    document.slideImage.src = image[imgNumber - 1];
    document.getElementById('text').innerHTML = text[imgNumber - 1];
}
if (document.images) {
    var image1 = new Image();
    image1.src = "http://www.dummyimage.com/60x60/&text=1";
    var image2 = new Image();
    image2.src = "http://www.dummyimage.com/60x60/&text=2";
    var image3 = new Image();
    image3.src = "http://www.dummyimage.com/60x60/&text=3";
    var image4 = new Image();
    image4.src = "http://www.dummyimage.com/60x60/&text=4";
}​