charliepark/slideshow.html

## slideshow.html
<!DOCTYPE html>
<html>
<head>
  <title>Slideshow</title>
  <style type="text/css">
  .box{height:100px;display:none;width:100px;}
  .red{background:red;display:block}
  .orange{background:orange}
  .yellow{background:yellow}
  .green{background:green}
  .blue{background:blue}
  </style>
</head>
<body>

<p style="width:300px">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.</p>

<div id="slideshow">
  <div class="red box"></div>
  <div class="orange box"></div>
  <div class="yellow box"></div>
  <div class="green box"></div>
  <div class="blue box"></div>
</div>

<script type="text/javascript">
  var boxes = document.querySelectorAll("#slideshow .box"), showingId = 0;

  var cycle = function(){
    boxes[showingId].style.display = "none";
    showingId == 4 ? showingId = 0 : showingId += 1;
    boxes[showingId].style.display = "block";
  }

  window.onload = function(){
    window.setInterval(function(){cycle()},3000);
  };
</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Slideshow</title>
	<style type="text/css">
	.box{height:100px;display:none;width:100px;}
	.red{background:red;display:block}
	.orange{background:orange}
	.yellow{background:yellow}
	.green{background:green}
	.blue{background:blue}
	</style>
	</head>
	<body>

	<p style="width:300px">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.</p>

	<div id="slideshow">
	<div class="red box"></div>
	<div class="orange box"></div>
	<div class="yellow box"></div>
	<div class="green box"></div>
	<div class="blue box"></div>
	</div>

	<script type="text/javascript">
	var boxes = document.querySelectorAll("#slideshow .box"), showingId = 0;

	var cycle = function(){
	boxes[showingId].style.display = "none";
	showingId == 4 ? showingId = 0 : showingId += 1;
	boxes[showingId].style.display = "block";
	}

	window.onload = function(){
	window.setInterval(function(){cycle()},3000);
	};
	</script>

	</body>
	</html>