Un slide show muy simple sin efectos puede ser esto.
---------------------------HTML----------------------------------
<html>
<head>
<link rel="stylesheet" type="text/css" href="SlideShow.css">
<title>Prueba de animacion SlideShow</title>
</head>
<body>
<h1>Imagenes</h1>
<div id="imagenes" class="">
<ul class="enlinea">
<li>
<img src="http://azu1.facilisimo.com/ima/i/2/b/5b/412_79226_6368679_731490.jpg" class="miniatura">
</li>
<li>
<img src="http://www.ocio.net/wp-content/uploads/mascotas/perro-cachorro.jpg" class="miniatura">
</li>
<li>
<img src="http://www.aquanatura.es/spa/category/extractimg.cgi?action=storefront&code=ST009" class="miniatura">
</li>
<li>
<img src="http://www.i-perros.com/image-files/cachorros.jpg" class="miniatura">
</li>
</ul>
</div>
<div>
<img id="imagen" src="http://azu1.facilisimo.com/ima/i/2/b/5b/412_79226_6368679_731490.jpg">
</div>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".miniatura").click(function() {
$("#imagen").attr("src",$(this).attr("src"));
});
});
</script>
</body>
</html>
--------------------------------------------------------------------------------
----------------------------------CSS-----------------------------------------
#imagenes > ul > li{
display: inline-block;
padding-bottom: 20px;
}
.miniatura{
height: 50px;
width: 50px;
}
--------------------------------------------------------------------------------
Si quieres transiciones avisa y hago alguna tonteria.
---------------------------HTML----------------------------------
<html>
<head>
<link rel="stylesheet" type="text/css" href="SlideShow.css">
<title>Prueba de animacion SlideShow</title>
</head>
<body>
<h1>Imagenes</h1>
<div id="imagenes" class="">
<ul class="enlinea">
<li>
<img src="http://azu1.facilisimo.com/ima/i/2/b/5b/412_79226_6368679_731490.jpg" class="miniatura">
</li>
<li>
<img src="http://www.ocio.net/wp-content/uploads/mascotas/perro-cachorro.jpg" class="miniatura">
</li>
<li>
<img src="http://www.aquanatura.es/spa/category/extractimg.cgi?action=storefront&code=ST009" class="miniatura">
</li>
<li>
<img src="http://www.i-perros.com/image-files/cachorros.jpg" class="miniatura">
</li>
</ul>
</div>
<div>
<img id="imagen" src="http://azu1.facilisimo.com/ima/i/2/b/5b/412_79226_6368679_731490.jpg">
</div>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".miniatura").click(function() {
$("#imagen").attr("src",$(this).attr("src"));
});
});
</script>
</body>
</html>
--------------------------------------------------------------------------------
----------------------------------CSS-----------------------------------------
#imagenes > ul > li{
display: inline-block;
padding-bottom: 20px;
}
.miniatura{
height: 50px;
width: 50px;
}
--------------------------------------------------------------------------------
Si quieres transiciones avisa y hago alguna tonteria.