Como Fazer um slides com Numeração



É. Uma leitora pediu pra eu Fazer hum tutorial de deslizar com Numeração Como ESSE here fazer  Exemplo .
Vamos La Para o tuto:


Para SUA Segurança o Faça o backup de fazer template Seu. 
Para Voce Achar Fácil como marcas Que eu escrever here DE UM CTRL + F na caixinha that aparecer coloque uma tag pedida.
VA los EDITAR HTML - e doer um Tag   </ head>  . logotipo e cole Acima Dela o Código abaixo 

Visualize se estiver salve Tudo ok como Modificações.




<! - JavaScript Slider Horizontal - Inicio ->
<Script src = 'http: //ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type = 'text / javascript' />
<Script type = "text / javascript">
$ (Document) .ready (function () {
 // Definir o estado predefinido de cada peça portfólio
 $ (". Busca") show ().;
 $ ("Busca um.: Em primeiro lugar"). AddClass ("activo");
  
 // Pega o tamanho das imagens, quantos são, em seguida, determin o tamanho da bobina imagem.
 . var imageWidth = $ (". janela") largura ();
 var imageSum = $ ("img image_reel.") size ().;
 var imageReelWidth = imageWidth * imageSum;
 // Ajuste o carretel imagem de seu novo tamanho
 . $ (". Image_reel") css ({'largura': imageReelWidth});
 // Paging + Função Slider
 gire = function () { 
  var TRIGGERID = $ active.attr ("rel") - 1; // Obter número de vezes que a deslizar
  var image_reelPosition = TRIGGERID * imageWidth; // Determina a distância da bobina imagem precisa deslizar
  $ ("Busca a.") RemoveClass ("ativo").; // Remove toda a classe ativa
  $ Active.addClass ("ativo"); // Adicionar classe ativa (US $ ativo é declarado na função rotateSwitch)
  
  // Slider Animação
  $ (". Image_reel"). Animar ({
   left: -image_reelPosition
  }, 500);
  
 };
 // Rotação + temporização de eventos
 rotateSwitch = function () {  
  jogar = setInterval (function () {// Set Timer - isso vai se repetir a cada 3 segundos
   . $ Ativo = $ ('. A.active paginação') next ();
   if ($ active.length === 0) {// Se paginação chega ao fim ...
    $ Ativo = $ ('paging de um:. Primeiro'); // Voltar ao primeiro
   }
   gire (); // Acionar a função de paginação e controle deslizante
  }, 7000); // Velocidade Timer em milissegundos (3 segundos)
 };
 rotateSwitch (); // Função Executar no lançamento
 // Em Hover
 $ (". Image_reel a"). Pairar (function () {
  clearInterval (reprodução); // Pare a rotação
 }, Function () {
  rotateSwitch (); // Rotação Resume
 }); 
 // Em Click
 $ (". Paginação a"). Click (function () { 
  $ Ativo = $ (this); // Ative a paginação clicado
  // Temp reposição
  clearInterval (reprodução); // Pare a rotação
  gire (); // Rotação aciona imediatamente
  rotateSwitch (); // Rotação Resume
  return false; // Salto navegador Impedir a âncora link
 }); 
});
</ Script>
<! - JavaScript Slider Horizonta - Fim ->

Agora Vamos aplicar Estilos AO slides
Voce Aqui Vai Mudar a Altura - altura
a Largura - largura etc ... por ISSO when Fizer como Imagens Para O deslize coloque TODAS NA MESMA ALTURA e largura parágrafo ficarem certinhas no slide.

VA parágrafo MODELO - EDITAR HTML e ache uma tag   ]]> </ b: skin> . e cole Antes Dela o Código abaixo 
DEPOIS salve como Modificações



 text-decoration: none;
color: # ffffff; 
background: # fc3e66;
border: 1px solid # d3aed7; 
-moz-border-radius: 0px; 
-khtml-border-radius: 0px; 
webkit-border-radius: 0px;
 } 
/ * - Estilos fazer ligação Ativo da Numeração - * / 
.paging a.active { 
font-weight: bold; 
border: 1px solid # fc3e66; 
color: # fc3e66; 
background: # ffc4e0;
-moz-border-radius: 17px;
-khtml-border-radius: 17px; 
webkit-border-radius: 17px; }
/ * - Estilos fazer ligação foco da Numeração - * / 
.paging a: hover { 
font-weight: bold; 


Agora Vamos ver Onde Vamos colocar o slide
Vou mostrar Dois jeitos parágrafo Voce.
VA los LAYOUT - ADICIONAR UM GADGET - HTML / Javascript e cole o Código abaixo


<Div class = "main_view"> 
<div class = "janela"> 
<div class = "image_reel"> 
<a href="LINK_1" alt=""> <img src = "URL_IMG_1" /> </a> 
< a href = "LINK_2" alt = ""> <img src = "URL_IMG_2" /> </a> 
<a href="LINK_3" alt=""> <img src = "URL_IMG_3" /> </a> 
< a href = "LINK_4" alt = ""> <img src = "URL_IMG_4" /> </a> 
</ div> </ div> 
<div class = "paginação"> 
<a href = "www.blogger.com "rel =" 1 "> 1 </a> 
<a href="www.blogger.com" rel="2"> 2 </a> 
<a href = "www.blogger.com" rel = "3" > 3 </a> 
<a href="www.blogger.com" rel="4"> 4 </a> 
</ div> </ div>

Agora se voce Localidade: Não Quer embaixo fazer Cabeçalho Mais sim não Cabeçalho OU SEJA nenhum cabeçalho do blog
Entao va los MODELO - EDITAR HTML - PROSSEGUIR - Procuradoria POR   # header-wrapper {
e não coloque definitiva desse Trecho
Display: none;
Como ESTA nessa Imagem:

DEPOIS Procuradoria POR   <div id = 'header-wrapper'>  com a Ajuda do  CTRL + F
E logotipo Acima DELE cole O Último Código that was Passado.
Como ESTA na Imagem abaixo

Bom e ai entenderam ESPERO QUE SIM ... rs
Localidade: Não sou muito boa pra Fazer tutoriais fico Toda perdida rsrs ...
Bjooos

Creditos do tutorial:

Nenhum comentário:

Postar um comentário


Restaurar um blog excluido

Se você acidentalmente excluiu seu blog e quer tê-lo de volta, pode recuperá-lo durante um breve período após a exclusão. Para desfaz...