Jquery : um simples slider de imagens com mouse hover

Temos nesse esquema, uma imagem principal e alguns thumbnails, onde, ao passar o mouse por cima dos thumbs, a imagem principal muda para a imagem que é apontada pelos thumbs.

Assim, temos por exemplo, o html com as imagens

Um css básico

#main-img { 
 width: 200px; 
 height: 300px; 
 overflow:hidden; 
}
#main-img img { width: 200px; }

#thumb-img { width: 200px; }
#thumb-img li { 
 margin-right: 20px; 
 display:inline; 
 width: 50px; 
 height: 50px; 
 height-overflow: hidden; 
}
#thumb-img img { width: 50px; }

O javascript então , para ter o nosso efeito será

$(document).ready( function(){

 $("#thumb-img img").hover( function(){
  /* Pega o nome da imagem do thumbnail */
  var thumbsrc = $(this).attr('src');
  /* Substitue a imagem principal pela imagem do thumbnail */
  $("#main-img img").attr('src',thumbsrc);
 });
 
});

devidamente colocado num script a parte ou no inicio da página junto com a versão mais atual do jquery aqui.