kaecy/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dogs slideshow</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="slide.js" type="text/javascript"></script>
</head>

<body>
<div id="wrapper">
  <header>
    <h1>Please adopt ME!</h1>
  </header>
  <div id="slideshow">
  <div id="images"><img id="currentPhoto" src="images/dog1.jpg" width="960" height="400" alt="dog1"></div>
  <p id="caption">I will be a great dog</p>
    <nav id="slideNav">
      <ul>
        <li><a href="#" onclick="slideshow('0'); return false;">1</a></li>
        <li><a href="#"  onclick="slideshow('1'); return false;">2</a></li>
        <li><a href="#" onclick="slideshow('2'); return false;">3</a></li>
        <li><a href="#" onclick="slideshow('3'); return false;">4</a></li>
      </ul>
    </nav>
  </div>
</div>
</body>
</html>

## slide.js
// JavaScript Document

var num=0;

//Replace with: relative pathes to your images, alt text, caption
imgArray = [
  ['images/dog1.jpg','dog1', 'I will be a great dog'],
  ['images/dog2.jpg','dog2','Please adopt me'],
  ['images/dog3.jpg','dog3','I am very smart'],
  ['images/dog4.jpg','dog4','I love to play and sleep']
]

function slideshow(slide_num) {
  document.getElementById('currentPhoto').src=imgArray[slide_num][0];
  document.getElementById('currentPhoto').alt=imgArray[slide_num][1];
  document.getElementById('caption').innerHTML=imgArray[slide_num][2];
}

## style.css
@charset "utf-8";
/* CSS Document */

#wrapper{
  width:960px;
	margin:0 auto;
	font-family:Verdana, Geneva, sans-serif;
}

nav#slideNav li{
	float:left;
	width:20px;
	height:20px;
	background-color:#F63;
	margin: 2px;
	list-style-type:none;
	text-align:center;
}

nav#slideNav li a{
	color:#ffffff;
	text-decoration:none;
}

p#caption {
	background-color:#000;
	color:#fff;
	text-align:center;
	padding:5px;
	margin-top:0;

}
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>dogs slideshow</title>
	<link href="style.css" rel="stylesheet" type="text/css">
	<script src="slide.js" type="text/javascript"></script>
	</head>

	<body>
	<div id="wrapper">
	<header>
	<h1>Please adopt ME!</h1>
	</header>
	<div id="slideshow">
	<div id="images"><img id="currentPhoto" src="images/dog1.jpg" width="960" height="400" alt="dog1"></div>
	<p id="caption">I will be a great dog</p>
	<nav id="slideNav">
	<ul>
	<li><a href="#" onclick="slideshow('0'); return false;">1</a></li>
	<li><a href="#" onclick="slideshow('1'); return false;">2</a></li>
	<li><a href="#" onclick="slideshow('2'); return false;">3</a></li>
	<li><a href="#" onclick="slideshow('3'); return false;">4</a></li>
	</ul>
	</nav>
	</div>
	</div>
	</body>
	</html>
	// JavaScript Document

	var num=0;

	//Replace with: relative pathes to your images, alt text, caption
	imgArray = [
	['images/dog1.jpg','dog1', 'I will be a great dog'],
	['images/dog2.jpg','dog2','Please adopt me'],
	['images/dog3.jpg','dog3','I am very smart'],
	['images/dog4.jpg','dog4','I love to play and sleep']
	]

	function slideshow(slide_num) {
	document.getElementById('currentPhoto').src=imgArray[slide_num][0];
	document.getElementById('currentPhoto').alt=imgArray[slide_num][1];
	document.getElementById('caption').innerHTML=imgArray[slide_num][2];
	}
	@charset "utf-8";
	/* CSS Document */

	#wrapper{
	width:960px;
	margin:0 auto;
	font-family:Verdana, Geneva, sans-serif;
	}

	nav#slideNav li{
	float:left;
	width:20px;
	height:20px;
	background-color:#F63;
	margin: 2px;
	list-style-type:none;
	text-align:center;
	}

	nav#slideNav li a{
	color:#ffffff;
	text-decoration:none;
	}

	p#caption {
	background-color:#000;
	color:#fff;
	text-align:center;
	padding:5px;
	margin-top:0;

	}