Duvida SlideShow

Gostaria de saber como fazer aquela slideshow q tem na maioria dos sites, aonde vc clica em um numero e aperce certa imagem.

Primeiro baixe essas bibliotecas:
Download via Mediafire

Configurando a página inicial:
Após baixar, inclua esses dois arquivos usando

Código:

<script type="text/javascript" src="Jquery.js"></script>
<script type="text/javascript" src="Slider.js"></script>

Em sua página inicial!

src="URL onde está os arquivos"

Arquivo CSS:
Obs. Não estou com tempo pra fazer outro arquivo CSS explicativo, então peguei esse do meu site do Batalha, é só você alterar as posições!

Código:


#slider {
   float:left;
   position:relative;
   overflow:auto;
   width:400px;
   height:150px;
   background:#000;
   border: 0;
   padding: 0;
   margin: 0;
      font-size:10px;
}

#slider ul {
   position:absolute;
   list-style:none;
   top:0;
   left:0;
   border: 0;
   padding: 0;
   margin: 0;
}

#slider li {
   float:left;
   width:400px;
   height:150px;
   margin: 0;
   border: 0;
}

.portal_pagination {
   position:relative;
   float:left;
   list-style:none;
   height:25px;
   top: 0px;
   left: 180px;
   margin-top: -140px;
   margin-left:90px;
   font-size:10px;
}

.portal_pagination li {
   font-family:Verdana, Geneva, sans-serif;
   font-size:9px;
   font-weight:bold;
   font-size:10px;
   float:left;
   cursor:pointer;
   padding:5px 8px;
   background:#CDE7F4;
   margin:0 4px 0 0;
   text-align:center;
   color:#000;
   border-radius: 20px;
}

.portal_pagination li:hover {
   background:#4A95C9;
   color:#000;
   font-size:10px;
}

.portal_pagination li.current {
   background:#4A95C9;
   color:#000;
}

#portal_wrapper {
   width: 400px;
   float:left;
   font-size:10px;
   margin-left:20px;
   border:1px solid #4A95C9;
}

#portal_wrapper_left {
   width: 400px;
}

#portal_wrapper_right {
   width: 248px;
   float: right;
}


Código do Slider:

Código:


<div id="portal_wrapper">
    <div id="portal_wrapper_left">
        <div style="overflow: hidden;" id="slider">       
            <ul style="left: -2120px; width: 2650px;">
      <li><img src="../Tema/Img/01.jpg" alt=" " height="150" width="400"></li>      
        <li><img src="../Tema/Img/02.jpg" alt=" " height="150" width="400"></li>
        <li><img src="../Tema/Img/03.jpg" alt=" " height="150" width="400"></li>
            </ul>
        </div>
        <ul id="portal_pagination" class="portal_pagination">
      <li class="" onclick="slideshow.pos(0)">1</li>
      <li class="" onclick="slideshow.pos(1)">2</li>
      <li class="current" onclick="slideshow.pos(2)">3</li>
   </ul>
<script type="text/javascript">
var slideshow=new TINY.slider.slide('slideshow',{
                id:'slider',
                auto:5,
                resume:true,
                vertical:false,
                navid:'portal_pagination',
                activeclass:'current',
                position:0
            });
</script>
</div>
</div>


Explicando melhor:

<li><img src="01.jpg" alt=" " height="150" width="400"></li>
<li><img src="02.jpg" alt=" " height="150" width="400"></li>
<li><img src="03.jpg" alt=" " height="150" width="400"></li>

Pode usar quntas imagens for necessária , contanto que o código

<ul id="portal_pagination" class="portal_pagination">
<li class="" onclick="slideshow.pos(0)">1</li>
<li class="" onclick="slideshow.pos(1)">2</li>
<li class="current" onclick="slideshow.pos(2)">3</li>
</ul>

esteja com as mesmas quantidade que as imagens, pôs esses serão os botões para cada imagem!

<script type="text/javascript">
var slideshow=new TINY.slider.slide('slideshow',{
id:'slider',
auto:5,
resume:true,
vertical:false,
navid:'portal_pagination',
activeclass:'current',
position:0
});
</script>

Preciso nem dizer que é o código que ativa o script e que é de configuração para o mesmo.
Faça isso e o resultado será este:
.:: Batalha RPG ::.

Vlws mto obrigado!