SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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>&nbsp;&nbsp;
    <a href="#" onclick="clearTimeout(timerID)"><img src="PAUSE.png"></a>&nbsp;&nbsp;
    <a href="#" onclick="document.rImage.src='1.jpg'; clearTimeout(timerID)"><img src="STOP.png"></a>

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


    Thank you very much!

  2. #2
    Non-Member
    Join Date
    Dec 2010
    Location
    /home/pc
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code JavaScript:
    <!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>


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •