Siga-nos em...
Follow us on Twitter Follow us on Facebook Watch us on YouTube
Registro


HGIDC
Resultados 1 a 3 de 3
  1. #1

    Avatar de Nerdzinhu
    Data de Ingresso
    Nov 2010
    Localização
    Meu quarto
    Idade
    21
    Posts
    90
    Agradecido
    0
    Agradeceu
    0
    Peso da Avaliação
    8

    Padrão Criando SlideShow

    Slide show , é um passador de imagens ,
    É util, e deixa bem atraente a pagina.


    Lembre-se , voce deve ter
    vamos lá..

    index.html
    Código HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Slide Show - Jquery</title>
    <link  href="css/estilo.css" type="text/css" rel="stylesheet" />
    
    <script type="text/javascript" src="js/jquery-1.3.2.min.js" ></script>
    <script type="text/javascript" src="js/jquery.cycle.all.min.js" ></script>
    
    <script type="text/javascript">
       $(function(){
             $("#slides ul").cycle({
                fx: 'fade',
                speed: 2500,
                timeout: 5000,
                prev : '#prev',  // volta a imagem
                next : '#next', // passa a imagem
                pager : '#pager' // contador de paginas
             })      
          })
    
          
    </script>
    
    
    
    </head>
    <body>
    
    crie uma lista ordenada para cada imagem.
    
    <div id="slides">
       <ul>
          <li><img src="images/slide1.jpg" alt="Slide 1" /></li>
          <li><img src="images/slide2.jpg" alt="Slide 2" /></li>
          <li><img src="images/slide3.jpg" alt="Slide 3" /></li>
       </ul>
    </div>
    <p>
          <a href="#" id="prev">Anterior</a>
          <span id="pager"></span>
          <a href="#" id="next">Próximo</a>
    </p>
    
    </body>
    </html>

    estilo.css
    Código:
    *{
       margin:0;
       padding:0;
       }
    
    #slides{
    width:500px;
    height:150px;
    margin:0 auto;
    overflow:hidden;
    }
    
    p{
    text-align:center;
    }

    Você deve ter esses 2 docs no web.
    caso tenha duvidas das ramificações das pastas , analize os src:

    <link href="css/estilo.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.3.2.min.js" ></script>
    <script type="text/javascript" src="js/jquery.cycle.all.min.js" ></script>


    [Somente usuários registrados podem vem os links. ]

    [Somente usuários registrados podem vem os links. ]

    [Somente usuários registrados podem vem os links. ]

  2. #2

    Avatar de Erick Paz
    Data de Ingresso
    Mar 2011
    Localização
    Joao Pessoa PB
    Idade
    26
    Posts
    119
    Agradecido
    7
    Agradeceu
    7
    Peso da Avaliação
    0

    Padrão

    Boa noite, estou iniciando com essa parte de slideShow em WebSite, gostaria de saber os detalhes, passo a passo a instalação desse Script, primeiro queria saber, devo baixar algo antes de começar?
    o que necessito?
    em que parte devo colcoar cada HTML?
    precis ode ajuda, aguardo...

  3. #3



    Avatar de Ayrton Ricardo
    Data de Ingresso
    May 2012
    Localização
    Joao Pessoa - PB
    Idade
    22
    Posts
    1.388
    Agradecido
    253
    Agradeceu
    167
    Peso da Avaliação
    20

    Padrão

    Código:
    <link  href="css/estilo.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.3.2.min.js" ></script>
    <script type="text/javascript" src="js/jquery.cycle.all.min.js" ></script>
    <script type="text/javascript">   $(function(){
             $("#slides ul").cycle({
                fx: 'fade',
                speed: 2500,
                timeout: 5000,
                prev : '#prev',  // volta a imagem
                next : '#next', // passa a imagem
                pager : '#pager' // contador de paginas
             })      
          })
    
    
          
    </script>
    Isso coloca-se acima da tag
    Código:
    </head>
    E isso:
    Código:
    <div id="slides">   <ul>
          <li><img src="images/slide1.jpg" alt="Slide 1" /></li>
          <li><img src="images/slide2.jpg" alt="Slide 2" /></li>
          <li><img src="images/slide3.jpg" alt="Slide 3" /></li>
       </ul>
    </div>
    <p>
          <a href="#" id="prev">Anterior</a>
          <span id="pager"></span>
          <a href="#" id="next">Próximo</a>
    </p>
    Você deixa desta forma, em qualquer parte entre( <body> e </body>) :
    Código:
    <!-- Estiliza esta div de acordo com o que quizer --><div><!-- esta que está há esquerda --><div id="slides">   <ul>
          <li><img src="images/slide1.jpg" alt="Slide 1" /></li>
          <li><img src="images/slide2.jpg" alt="Slide 2" /></li>
          <li><img src="images/slide3.jpg" alt="Slide 3" /></li>
       </ul>
    </div>
    <p>
          <a href="#" id="prev">Anterior</a>
          <span id="pager"></span>
          <a href="#" id="next">Próximo</a>
    </p></div>
    Este code foi feito em HTML caso vá usar em uma página .php remova está parte: <!-- Estiliza esta div de acordo com o que quizer --> e <!-- esta que está há esquerda -->


    Aquele código css não precisa, pois já foi adicionado o link do css acima da tag head!
    Baixe o que está descrito no primeiro post desse tópico!
    Att. FuryousⱣɃ
    Leiam, todo desenvolvedor PHP precisa conhecer: Hidden Content .
    Hidden Content
    Intel core I3-4130@3.4 | Blizzard T2 | GAB85M-D3H | 8 GB 1333 | R9 280x Vapor X OC | AOC 23" 3D | NZXT Phantom | Corsair CX 750

 

 

Informações de Tópico

Usuários Navegando neste Tópico

Há 1 usuários navegando neste tópico. (0 registrados e 1 visitantes)

Tópicos Similares

  1. |Tutorial| Criando Efeito Web 2.0
    Por DetroiT no fórum Iniciantes
    Respostas: 0
    Último Post: 31-08-2011, 01:27 PM
  2. |Tutorial| Criando um forum IPB
    Por FusioN no fórum IPB | Tutoriais
    Respostas: 14
    Último Post: 15-05-2011, 09:06 PM
  3. |Tutorial| Criando Sprays
    Por ExperT no fórum Counter Strike
    Respostas: 0
    Último Post: 01-10-2010, 01:48 AM
  4. |Tutorial| Criando Fenrir
    Por MauraoO no fórum Tutoriais, dicas e macetes
    Respostas: 0
    Último Post: 30-12-2009, 08:24 AM

Marcadores

Permissões de Postagem

  • Você não pode iniciar novos tópicos
  • Você não pode enviar respostas
  • Você não pode enviar anexos
  • Você não pode editar suas mensagens
  •