revitalk/slide.js

## slide.js
// JavaScript Document

var num=0;

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

 //Replace with your IDs of image and caption
function slideshow(slide_num) {
document.getElementById('slide').src=imgArray[slide_num][0];
document.getElementById('slide').alt=imgArray[slide_num][1];
document.getElementById('caption').innerHTML=imgArray[slide_num][2];
}

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

<body>
	<div id="slideshow">
		<img id="slide" src="images/slide1.jpg" alt="puppies slideshow">
		<p id="caption">I will be a great dog</p>
		<nav id="slidehow_nav">
			<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>
</body>
</html>

## style.css
*{
	margin:0;
	padding:0;
}


#slideshow{
	width:960px;
	margin:0 auto;
}

nav#slidehow_nav{
	float:right;
	margin-top:-75px;
	position:relative;
	z-index:100;
}

nav#slidehow_nav li {
	float:left;
	background-color: #ccc;
	list-style-type: none;
	text-align: center;
	margin-left:1px;
}

nav#slidehow_nav a{
	display:block;
	height:20px;
	width:25px;
	padding-top:5px;
	color:#000;
	text-decoration: none;
}

nav#slidehow_nav a:hover{
	background:orange;
}

#caption{
	font-family: "Trebuchet MS";
	font-size:2em;
	background-color: #000;
	opacity:0.5;
	color:#fff;
	padding:5px;
	height:40px;
	margin-top:-55px;
	text-align: center;

}
	// JavaScript Document

	var num=0;

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

	//Replace with your IDs of image and caption
	function slideshow(slide_num) {
	document.getElementById('slide').src=imgArray[slide_num][0];
	document.getElementById('slide').alt=imgArray[slide_num][1];
	document.getElementById('caption').innerHTML=imgArray[slide_num][2];
	}
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>puppies slideshow</title>
	<link href="style.css" rel="stylesheet">
	<script src="slideshow.js" type="text/javascript"></script>
	</head>

	<body>
	<div id="slideshow">
	<img id="slide" src="images/slide1.jpg" alt="puppies slideshow">
	<p id="caption">I will be a great dog</p>
	<nav id="slidehow_nav">
	<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>
	</body>
	</html>
	*{
	margin:0;
	padding:0;
	}


	#slideshow{
	width:960px;
	margin:0 auto;
	}

	nav#slidehow_nav{
	float:right;
	margin-top:-75px;
	position:relative;
	z-index:100;
	}

	nav#slidehow_nav li {
	float:left;
	background-color: #ccc;
	list-style-type: none;
	text-align: center;
	margin-left:1px;
	}

	nav#slidehow_nav a{
	display:block;
	height:20px;
	width:25px;
	padding-top:5px;
	color:#000;
	text-decoration: none;
	}

	nav#slidehow_nav a:hover{
	background:orange;
	}

	#caption{
	font-family: "Trebuchet MS";
	font-size:2em;
	background-color: #000;
	opacity:0.5;
	color:#fff;
	padding:5px;
	height:40px;
	margin-top:-55px;
	text-align: center;

	}