Skip to content

Instantly share code, notes, and snippets.

@artlung

artlung/slideshow.html

Created January 21, 2011 07:10
Show Gist options
  • Save artlung/789346 to your computer and use it in GitHub Desktop.
Save artlung/789346 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
slideshow.html
<!--
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.
-->
<body>
<div id="slideshow">
<img src="http://placehold.it/300x200&text=foo1.jpg">
<img src="http://placehold.it/300x200&text=foo2.jpg" style="display: none">
<img src="http://placehold.it/300x200&text=foo3.jpg" style="display: none">
<img src="http://placehold.it/300x200&text=foo4.jpg" style="display: none">
<img src="http://placehold.it/300x200&text=foo5.jpg" style="display: none">
</div>
<script>
var slideshow = document.getElementById('slideshow');
var slides = slideshow.getElementsByTagName('img');
var idx = 0;
function changeSlide() {
slides[idx].style.display = 'none';
idx = (idx + 1) % slides.length;
slides[idx].style.display = 'block';
}
setInterval(changeSlide, 3000);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment