www.webdeveloper.com
Results 1 to 4 of 4

Thread: Autoplay of slideshow

Hybrid View

  1. #1
    Join Date
    Jun 2013
    Posts
    3

    Autoplay of slideshow

    Good day!

    I am new in web development and i am trying to work on our company's website. I am having trouble in making the slideshow to autoplay once the site is loaded. here is the code for java:

    NewImg = new Array (
    "images/Pic03.png",
    "images/Pic01.jpg",
    "images/Pic02.jpg"
    );

    var random_display = 0;
    var ImgNum = 0;
    var ImgLength = NewImg.length - 1;
    var totalImages = NewImage.l
    //Time delay between Slides in milliseconds
    var delay = 1500;
    var lock = true;
    var run;

    function chgImg(direction) {
    if (document.images) {
    ImgNum = ImgNum + direction;
    if (ImgNum > ImgLength) {
    ImgNum = 0;
    }
    if (ImgNum < 0) {
    ImgNum = ImgLength;
    }
    document.slideshow.src = NewImg[ImgNum];
    }
    }


    And here's the html:
    <div id="slideshow">
    <img src="images/Pic03.png" name="slideshow">
    </div>

    Css:
    #slideshow {
    margin-top: 170px;
    width: 1024px;
    height: 368px;
    position: absolute;
    z-index:3;
    }

    Help will greatly be appreciated.

    Thanks!

  2. #2
    Join Date
    Jun 2013
    Location
    Galion
    Posts
    10
    You'll need to _call_ your image-changing function (chgImg) at some point. If the order of the images matters at all, I would recommend using an onrollover event for that, so that if the page is loaded in a background tab the slideshow doesn't start until the user gets to the tab with your page in it. (Even if the order is random, this may still be a pretty good idea, for performance reasons, especially if the images are each fetched from the server when loaded.)

    Also, if you want the image change to happen more than once, you'll need to have it set a timer (just before it finishes) to call it again.

  3. #3
    Join Date
    Jun 2013
    Posts
    3
    Sorry, how do you do that?

  4. #4
    Join Date
    Jun 2013
    Location
    Galion
    Posts
    10
    Can you be more specific? Which parts did you need help with?

    How much Javascript (and, particularly, how much of the DOM) do you know?

    Also, do you have access to the rhino book? That's what I always use for reference, when there's something I'm not sure of (which happens to me a lot with Javascript -- it's not my first language -- albeit not as much as with C).

    I do have a working example I can show you of a web page that changes some of its content, effectively rotating through several options. It's not changing images, and because of that it's not fetching new content from the server (because the text it's working with is small enough to just load with the page), but if you look at the associated javascript you can see how the function that does the rotating is called and how it sets up a timer to call itself again. If your question is about some other aspect of the problem, you'll have to clarify.

    Oh, the example:
    http://cgi.galion.lib.oh.us/mockups/mockup-v1d.html
    (That's not a production page, just a mockup from our planning process; but it still works as an example.)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles