Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o tema • Voltar para a ficha do tema
Duvida SlideShow
2 participantes
Página 1 de 1
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.
Marph- Novato
- Mensagens : 19
Créditos : 0
Re: Duvida SlideShow
Primeiro baixe essas bibliotecas:
Download via Mediafire
Configurando a página inicial:
Após baixar, inclua esses dois arquivos usando
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 do Slider:
Explicando melhor:
Pode usar quntas imagens for necessária , contanto que o código
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 ::.
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>
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
esteja com as mesmas quantidade que as imagens, pôs esses serão os botões para cada imagem!<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>
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 ::.
_________________
Eu poderia ser a pessoa mais agradavel do mundo! mas optei por ser eu mesmo.
Tópicos semelhantes
» [Dúvida]Uma duvida aquii, ajudem é sobre o Pributon 2.0 !
» [Duvida] Gente tenho uma duvida sobre os chars
» [DUVIDA] dúvida sobre o nível do NP Master v3
» Duvida RGSS mais uma duvida
» [Dúvida] Outra dúvida forumeiros..
» [Duvida] Gente tenho uma duvida sobre os chars
» [DUVIDA] dúvida sobre o nível do NP Master v3
» Duvida RGSS mais uma duvida
» [Dúvida] Outra dúvida forumeiros..
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos