Grow your CSS skills. Land your dream job.

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

    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

    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: [http://codepen.io/joe/pen/CHehf](http://codepen.io/joe/pen/CHehf “http://codepen.io/joe/pen/CHehf”)

    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.

*May or may not contain any actual "CSS" or "Tricks".