Skip to content

Instantly share code, notes, and snippets.

@maiis
Forked from ryandoherty/slideshow.js
Created May 14, 2012 14:12
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save maiis/2694217 to your computer and use it in GitHub Desktop.
Save maiis/2694217 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment