Skip to content

Instantly share code, notes, and snippets.

@ryandoherty
Created January 21, 2011 03:25
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save ryandoherty/789194 to your computer and use it in GitHub Desktop.
Save ryandoherty/789194 to your computer and use it in GitHub Desktop.
Slideshow in 12 lines of JavaScript
<script>
/*
A div with an id of 'slideshow' contains five images, the first of which is shown and the others are hidden using
a display style of none. Using JavaScript, create a simple slideshow that cycles through the images, displaying
each image for three seconds at a time, looping back to the first image when the end is reached. You cannot use
jQuery or any other library.
*/
(function() {
var images = document.getElementById("slideshow").getElementsByTagName("img");
var currentIndex = 0;
function rotate() {
images[currentIndex].style.display = 'none';
currentIndex = currentIndex+1 == images.length ? 0 : currentIndex+1;
images[currentIndex].style.display = '';
}
setInterval(rotate, 3000);
})();
</script>
@fwenzel
Copy link

fwenzel commented Jan 21, 2011

Line 14 wants a modulo operation, bad! ;)

@tchalvak
Copy link

Not bad.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment