How Can I add: Start Pause button to the following JS Code

Discussion in 'JavaScript' started by Kamal42, Jan 14, 2013.

0
  1. #1
    var myImage = document.getElementById("mainImage");
    var imageArray = ["_images/overlook.jpg","_images/winery_sign.jpg","_images/lunch.jpg",
    "_images/bigSur.jpg","_images/flag_photo.jpg","_images/mission_look.jpg"];

    var imageIndex = 0;

    function changeImage (){
    myImage.setAttribute("src", imageArray[imageIndex]);
    imageIndex++;

    if (imageIndex >= imageArray.length) {
    imageIndex = 0;

    }
    }

    var intervaleHandle = setInterval(changeImage,5000);


    myImage.onclick = function () {
    clearInterval(intervaleHandle);
    };
     
    Kamal42, Jan 14, 2013 IP
  2. Rukbat

    Rukbat Well-Known Member

    Messages:
    2,908
    Likes Received:
    37
    Best Answers:
    51
    Trophy Points:
    125
    #2
    The stop button is easy. Start may work (it's untested):
    var myImage = document.getElementById("mainImage");
[COLOR=#ff0000][B]var intervaleHandle;[/B][/COLOR]
var imageArray = ["_images/overlook.jpg","_images/winery_sign.jpg","_images/lunch.jpg",
                  "_images/bigSur.jpg","_images/flag_photo.jpg","_images/mission_look.jpg"];
                  
var imageIndex = 0;

function changeImage (){
    myImage.setAttribute("src", imageArray[imageIndex]);
    imageIndex++;
    
    if (imageIndex >= imageArray.length) {
        imageIndex = 0;
        
    }
}

[COLOR=#ff0000][B]intervaleHandle = setInterval(changeImage,5000);[/B][/COLOR] //take out the "var" here

[COLOR=#ff0000][B]function startShow() {
[/B]  [B]intervaleHandle = setInterval(changeImage,5000);[/B]
[B]}[/B]
[/COLOR]
myImage.onclick = function () {
clearInterval(intervaleHandle);
};
[COLOR=#ff0000][B]<input type="button" value="Stop" onClick="clearInterval(intervaleHandle);" />
<input type="button" value="Start" onClick="startShow();" />[/B][/COLOR]
    Code (markup):
     
    Rukbat, Jan 17, 2013 IP