Typically, it seems, the DOM markup for a slideshow is harrowing. This example will show how that markup can be made much more straightforward.
Ready our DOM with a simple, unimposing markup. To allow the page to gracefully degrade in the absence of JavaScript, place the initial image as the background of #fodaddy
.
<div id="fodaddy"> <div id="fo"></div> </div> <style type="text/css"> #fodaddy { width:367px; background-image:url('08_cow_one.jpg'); } #fo, #fodaddy { height:318px; } </style>
Inject the main, viewable image behind #fo
and set #fo
to a zero opacity so that it is invisible, allowing the main image to be the only item seen by users. Place a new image in #fo
, which is our curtain of sorts, and then pull the curtain on the main image by fading in a bit of fo; then repeat endlessly in a loop.
Identify which images to loop through. Remember that the image in the first...