<a href="http://graphi.lescigales.org/wp-content/uploads/2012/03/index.html">VER EJEMPLO</a>
Código HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title></title>
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js" type="text/javascript"></script>
</head>
<style>
body{
background-color:black;
color:white;
font-family:Verdana;
font-size:11px;
text-align:center;
}
#info{
border:10px solid #8E94A3;
width:296px;
height:295px;
background-color:white;
clear:right;
padding:10px;
overflow:hidden;
margin:0 auto;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
#content{
width:400px;
padding-top:50px;
margin:0 auto;
}
#info img{
width:300px;
float:left;
}
#pos{
font-family:Serif;
font-size:25px;
color:#989969;
}
</style>
<body>
<div id="content">
<div>Presiona las flechas del teclado izquierda o derecha</div>
<br>
<div id="gallery">
<div id="info">
<img src="http://www.softwarebrands.co.uk/images/Adobe%20creative%20suite%20cs3%20master%20collection.jpg">
<img src="http://www.solaryeolica.com.ar/contents/media/adobecs4designpremium.jpg">
<img src="http://2.bp.blogspot.com/-vS6Qh8gwQzA/Tmw5cE-q6uI/AAAAAAAAEc8/hpAaE5uXXqE/s1600/Adobe+Dreamweaver+CS5.jpg">
<img src="http://4.bp.blogspot.com/-LHZRzBhMvd4/TsW0IO7fjXI/AAAAAAAAALc/5aqof0FBRLg/s1600/adobe_photoshop_cs4.jpg">
<img src="http://corsabusiness.com.mx/eshop/images/sw/adb_after_effects_cs3.jpg">
</div>
<br/>
<div id="pos"></div><br><br>
</div>
</div>
<script>
ctrl = 0;
window.onload = function() {
document.onkeydown = gallery;
gallery(37);
}
function gallery(evento) {
var info = $('#info');
var evento = window.event || evento;
if(evento.keyCode==37){
ctrl--;
$('#info > img').each(function(index) {
$(this).hide();
if(ctrl < 0){
ctrl = $('#info > img').length-1;
}
if(index == ctrl ){
$(this).fadeIn('fast');
}
});
}
//RIGHT
if(evento.keyCode==39){
ctrl++;
$('#info > img').each(function(index) {
$(this).hide();
if(ctrl >= $('#info > img').length){
ctrl = 0;
}
if(index == ctrl ){
$(this).fadeIn('fast', function() {
// Animation complete
});
}
});
}
$("#pos").html(ctrl + 1 + "/" + $('#info > img').length);
}
</script>
</body>
</html>
