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.
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".