The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Image Timer in Javascript

  • # January 4, 2013 at 2:16 am

    I want to make a image slider it will have to slide according to time and i have no idea how to do this can anyone can help me.

    # January 4, 2013 at 3:42 am

    This reply has been reported for inappropriate content.

    What do you mean slide according to time? You mean the slide will change every hour as the hour changes?

    # January 4, 2013 at 5:26 am

    here the scenario is
    i have 7 images
    i put those images one down other
    by setting left margin -100px,zindex=0 ,position=relative of each image.

    now i want to set the zindex property according to system time.

    I tired to do this with the help of loop but i failed

    # January 4, 2013 at 5:44 am

    This reply has been reported for inappropriate content.

    I’m just trying to understand properly: So you’ve got 7 images set to z-index: 0, but only 1 of them has a z-index set to the system time? So if it’s 20:30

    # January 4, 2013 at 3:43 pm

    It sounds to me like you’re either:

    A.) Wanting to set which image displays based on what the time of day is, so if it’s 07:00-10:00, show image A, if it’s 10:01-13:00, show image B, and so forth.

    Or B.) Wanting to set a timed delay on the slider function, so that the images progress in sequence after a set period of time, say every x seconds or every x minutes.

    Either of these cases is pretty simple, I should imagine. Situation A seems the most interesting (and if I’m reading your posts correctly, the most likely), so I’ll tackle that first.

    This may or may not be the most elegant way to go about it, as I’m no JavaScript expert yet, but I’d say a simple switch statement based on the current hour would do it. Take a look at this: []( “”)

    Basically, it just grabs the current date/time, filters out the hour and plops that into a variable, which is then referenced by the switch to get 3-hour ranges, and whichever range matches applies a class of “current” to the respective element. That class sets the z-index.

    I was far too lazy to make images, so I used colored backgrounds, and included an overlay with the a readout of the current time and comments in the HTML so you can see which lines up with which.

    I hope this helps!

    For B, just use setTimeout.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed