Image Slideshow Pause onMouseOver

Discussion in 'Javascript' started by Tim, Aug 6, 2003.

  1. Tim

    Tim Guest

    Hope someone in the big wide world can help...

    What I want to do is have an image slideshow which automatically
    scrolls through a series of images very fast, then pauses when you
    move your mouse over the image. The images will flick through (at a
    rate of about 5 per second) then pause when the user onMouseOver's.

    Any help would be gratefully received.

    :eek:)
     
    Tim, Aug 6, 2003
    #1
    1. Advertisements

  2. Tim

    Tim Guest

    I apologize, but my knowledge of JavaScript is apparently not that
    good. I tried incorporating your code with the existing code I was
    trying to use.



    ****HERE'S THE CODE I'M USING IN THE JAVASCRIPT FILE****

    var slideshowAutomaticSlides = new Array();
    var slideshowAutomaticCurrent = 0;

    // Preload slideshow images
    function slideshowAutomaticInit() {
    if (document.images) {
    for (var i = 0; i < slideshowAutomaticImageFiles.length; i++) {
    slideshowAutomaticSlides = new Image();
    slideshowAutomaticSlides.src = slideshowAutomaticImageDirectory
    + slideshowAutomaticImageFiles;
    }
    setTimeout('slideshowAutomaticForward();',
    slideshowAutomaticDelayBeforeStart*1000);
    }
    }

    // Show next slide
    function slideshowAutomaticForward() {
    if (document.images && typeof slideshowAutomaticSlides !=
    'undefined') {
    slideshowAutomaticCurrent++;
    if (slideshowAutomaticCurrent >= slideshowAutomaticSlides.length)
    slideshowAutomaticCurrent = 0;
    document.images.slideshowAutomatic.src =
    slideshowAutomaticSlides[slideshowAutomaticCurrent].src;
    }
    setTimeout('slideshowAutomaticForward();',
    slideshowAutomaticDelayBetweenSlides*1000);
    }




    ****HERE'S THE CODE I'M USING IN THE BODY OF MY HTML PAGE****

    <script language="javascript" type="text/javascript">
    <!--
    var slideshowAutomaticImageDirectory = '../images/';
    var slideshowAutomaticImageFiles = new Array('1.gif', '2.gif',
    '3.gif');
    var slideshowAutomaticDelayBeforeStart = 5;
    var slideshowAutomaticDelayBetweenSlides = 5;
    //-->
    </script>

    <script language="javascript" type="text/javascript"
    src="slideshow_automatic.js">
    <!--
    function slideshowAutomaticInit() {}
    //-->
    </script>

    <img src="../images/1.gif" name="slideshowAutomatic" width="20"
    height="21">


    *** How is it I go about including your code?? Thanks ever so much.
     
    Tim, Aug 7, 2003
    #2
    1. Advertisements

  3. Tim

    Tim Guest

    Thanks, that's kinda solved the problem. The only thing is that I
    wanted the slideshow to return to it's original frame rate when you
    onMouseOut. The method you use requires the user to wait for the timer
    to expire. Changing the timer to allow the user 5 seconds before
    resuming original frame rate works ok for my purpose though.


     
    Tim, Aug 11, 2003
    #3
  4. Modify the onMouseOut to instead of just change the timer value, to clear
    the current timeout, change the variable, and restart the timer again:

    onMouseOut="clearTimeout(timerID);
    slideshowAutomaticDelayBetweenSlides=0.2;
    timerID=setTimeout('slideshowAutomaticForward();',
    slideshowAutomaticDelayBeforeStart*1000);"

    This requires you to keep the timerID handy, so capture it on all your
    setTimeout calls.

    zin
     
    George Ziniewicz, Aug 11, 2003
    #4
  5. Tim

    Tim Guest

    Schedule your image change with

    How do I include your code (above) into my new code (below)? The code
    below simply cycles a series of images. As before, I'd simply like it
    to pause onMouseOver...

    <HTML>
    <HEAD>

    <SCRIPT LANGUAGE="JavaScript">

    var timeDelay = 0.15; // change delay time in seconds
    var Pix = new Array
    ("images/1.gif"
    ,"images/2.gif"
    ,"images/3.gif"
    );
    var howMany = Pix.length;
    timeDelay *= 1000;
    var PicCurrentNum = 0;
    var PicCurrent = new Image();
    PicCurrent.src = Pix[PicCurrentNum];
    function startPix() {
    setInterval("slideshow()", timeDelay);
    }
    function slideshow() {
    PicCurrentNum++;
    if (PicCurrentNum == howMany) {
    PicCurrentNum = 0;
    }
    PicCurrent.src = Pix[PicCurrentNum];
    document["ChangingPix"].src = PicCurrent.src;
    }
    //-->
    </script>
    </HEAD>

    <BODY OnLoad="startPix()">

    <img name="ChangingPix" src="images/1.gif">

    </BODY>
    </HTML>
     
    Tim, Aug 12, 2003
    #5
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.