Skip to content

Instantly share code, notes, and snippets.

@clstokes

clstokes/slideshow-javascript.html

Created January 23, 2011 15:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save clstokes/792159 to your computer and use it in GitHub Desktop.
Save clstokes/792159 to your computer and use it in GitHub Desktop.
Download ZIP
A solution to the JavaScript problem posed in observation 3 at http://bit.ly/gCmjbR.
Raw
slideshow-javascript.html
<!doctype html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="container">
<div id="main">
<div id="slideshow">
<img style="display: block;" src="http://t0.gstatic.com/images?q=tbn:ANd9GcRqIfB-nqFtdj0pq-2T4knkaQ4OFkcb3zYgQdr0PfGYueX8PM1t" >
<img style="display: none;" src="http://t2.gstatic.com/images?q=tbn:ANd9GcSYWz_otB5FzfZNFntUS50kHiVl2leVXu0zjeZzxLoK2no_l9v2" >
<img style="display: none;" src="http://t2.gstatic.com/images?q=tbn:ANd9GcQdpd8FmFfuEqco_DxEE7YzKP2u10sHd81qLh1z-HgT3b2H4Xjm" >
<img style="display: none;" src="http://t2.gstatic.com/images?q=tbn:ANd9GcRiekRzalPabWKNzznjFwKm2HM3DbTadktjy__mfVRH2Huq02eW" >
<img style="display: none;" src="http://t1.gstatic.com/images?q=tbn:ANd9GcRy6uHGzcvSzB-30pmiaQtNfIfVCWHMJTtxnqP_h12L5VwOIeWa" >
</div>
<script type="text/javascript">
var slideshowIndex = 0,
slideshowMax = 4;
var slideshowNext = function() {
var images = document.getElementById( 'slideshow' ).getElementsByTagName( 'img' );
var currentImage = images[slideshowIndex].style.display = 'none';
slideshowIndex = ( slideshowIndex == slideshowMax ) ? 0 : (slideshowIndex + 1);
var nextImage = images[slideshowIndex].style.display = 'block';
}
setInterval( 'slideshowNext()', 3000 );
</script>
</div> <!--! end of #main -->
</div> <!--! end of #container -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment