How do you add a start button to a javascript presentation?

JavaScript
1

I have a working code already. It already has a play and pause button, but I do not have a working start button (it has to play it from the very start).

Here is the code:

<html>
<head>
<script type=“text/javascript”>
var interval = 500;
var random_display = 0;
var number = 0;
image = new Array();

image[number++] = new imageItem(“1.jpg”);
image[number++] = new imageItem(“2.jpg”);
image[number++] = new imageItem(“3.jpg”);
image[number++] = new imageItem(“4.jpg”);
image[number++] = new imageItem(“5.jpg”);
image[number++] = new imageItem(“6.jpg”);
image[number++] = new imageItem(“7.jpg”);
image[number++] = new imageItem(“8.jpg”);
image[number++] = new imageItem(“9.jpg”);
image[number++] = new imageItem(“10.jpg”);
image[number++] = new imageItem(“11.jpg”);
image[number++] = new imageItem(“12.jpg”);
image[number++] = new imageItem(“13.jpg”);
image[number++] = new imageItem(“14.jpg”);
image[number++] = new imageItem(“15.jpg”);
image[number++] = new imageItem(“16.jpg”);
image[number++] = new imageItem(“17.jpg”);
image[number++] = new imageItem(“18.jpg”);
image[number++] = new imageItem(“19.jpg”);
image[number++] = new imageItem(“20.jpg”);
image[number++] = new imageItem(“21.jpg”);
image[number++] = new imageItem(“22.jpg”);
image[number++] = new imageItem(“23.jpg”);
image[number++] = new imageItem(“24.jpg”);
image[number++] = new imageItem(“25.jpg”);
image[number++] = new imageItem(“26.jpg”);
image[number++] = new imageItem(“27.jpg”);
image[number++] = new imageItem(“28.jpg”);
image[number++] = new imageItem(“29.jpg”);
image[number++] = new imageItem(“30.jpg”);

var total_number_of_images = image.length;

function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}

function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}

function randNum(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}

function getNextImage() {
if (random_display) {
number = randNum(0, total_number_of_images-1);
}
else {
number = (number+1) % total_number_of_images;
}
var new_image = get_ImageItemLocation(image[number]);

return(new_image);
}

function getPrevImage() {
number = (number-1) % total_number_of_images;
var new_image = get_ImageItemLocation(image[number]);
return(new_image);
}

function prevImage(place) {
var new_image = getPrevImage();
document[place].src = new_image;
}

function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = “rotateImage('”+place+“')”;
timerID = setTimeout(recur_call, interval);
}
</script>
</head>
<body>
<center>

<img name=“rImage” src=“1.jpg”>
<br><br>

<a href=“#” onclick=“rotateImage(‘rImage’)”><img src=“PLAY.png”></a>  
<a href=“#” onclick=“clearTimeout(timerID)”><img src=“PAUSE.png”></a>  
<a href=“#” onclick=“document.rImage.src=‘1.jpg’; clearTimeout(timerID)”><img src=“STOP.png”></a>

</center>
</body>
</html>

Thank you very much!

2

This code has “Play”, “Pause” and “Play from the start” buttons.

You should be able to use the logic in this code to fix your code.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
            var picPaths = ['pic1.jpg','pic2.jpg','pic3.jpg','pic4.jpg'];
            var curPic = 0;
            var timer;
            //preload the images for smooth animation
            var imgO = new Array();
            for(i=0; i < picPaths.length; i++) {
                imgO[i] = new Image();
                imgO[i].src = picPaths[i];
            }

            function swapImage() {
                clearTimeout(timer); //need this in case play button is clicked while show is playing
                curPic = (++curPic > picPaths.length-1)? 0 : curPic;
                imgCont.src = imgO[curPic].src;
                timer = setTimeout(swapImage,2000);
            }

            function pause() {
                clearTimeout(timer);
            }

            function fromStart() {
               clearTimeout(timer);
               curPic = -1;
               swapImage();
            }

            window.onload=function() {
                imgCont = document.getElementById('imgBanner');
                imgCont.src = imgO[0].src;
            }
        </script>

    </head>
    <body>

        <div>
            <img id="imgBanner" src="" alt="" />
        </div>
        <input type="button" onclick="fromStart();" value="Play From the start" />
        <input type="button" onclick="swapImage();" value="Play" />
        <input type="button" onclick="pause();" value="Pause" />
    </body>
</html>