Making a simple JavaScript Slider, how would I add a description to my images?

Question

I am starting out with JavaScript and I really love using it. I apologize for being a noob, but I have alot of passion for this. Here is my code below. I would like to have a description with my simple slider. Any advice would be appreciated. Thanks.

note I know jQuery can achieve better results, but first I want to master normal javascript.

   var featureImg = document.getElementById("photoSlider");

    var ImgArray = ["image1.png" , "image2.png" , "image3.png", "image4.png", "image5.png"];
    var index = 0;

    function newImage() {
        featureImg.setAttribute("src", ImgArray[index]);
        index++;

        if (index >= ImgArray.length) {
            index = 0;
        }
    }

    setInterval(newImage, 2000);

Answer 1

You could use an array of objects and do something like,

HTML

<img id="photoSlider"></img>
<div id="photoDescription"></div>

js

var featureImg = document.getElementById("photoSlider");
var imgDescription = document.getElementById("photoDescription");

    var ImgArray = [{src:"http://placehold.it/140x101",desc:"description 1"},
 {src:"http://placehold.it/140x102",desc:"description 2"} ,
 {src:"http://placehold.it/140x103",desc:"description 3"}, 
{src:"http://placehold.it/140x104",desc:"description 4"}, 
{src:"http://placehold.it/140x105",desc:"description 5"}];
    var index = 0;

    function newImage() {
        featureImg.setAttribute("src", ImgArray[index].src);
        imgDescription.innerHTML= ImgArray[index].desc;
        index++;

        if (index >= ImgArray.length) {
            index = 0;
        }
    }

    setInterval(newImage, 2000);

http://jsfiddle.net/u5LtZ/2/

Answer 2

仅更新

featureImg.src = ImgArray[Index];