Como criar uma galeria para exibição de imagens no JavaScript igual à do Android

Escrito por jim campbell | Traduzido por bruno queiroz
  • Compartilhar
  • Tweetar
  • Compartilhar
  • E-mail

A linguagem JavaSript mantém um método chamado "slide" em que os programadores usam para criar uma galeria de imagem em forma de slides semelhante aos layouts da tela e aplicativos do Android. Esse recurso pode ser aplicado para exibir imagens em sequência. O slideshow (apresentação dos slides) alterna automaticamente as fotos em uma galeria para que os usuários possam ver uma seleção das suas melhores imagens sem ter que clicar uma por uma. É possível carregar várias imagens nessa apresentação.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

Instruções

  1. 1

    Abra o gerenciador de arquivos do seu servidor web e clique com o botão direito sobre a página que deseja aplicar o recurso de apresentação de imagens. Clique em "Abrir com" e selecione o editor de sua preferência.

  2. 2

    Crie um componente básico do slideshow. Pode-se usar o componente de uma imagem para criá-lo e configurá-lo para exibir a primeira imagem que queira. Insira o código a seguir na página onde deseja que o slideshow apareça e renomeie a imagem corretamente:

    <img src="image1.jpg" name="slideshow">

  3. 3

    Carregue cada imagem que queira exibir na apresentação. Adicione a seguinte instrução à seção do Javascript da página:

    var image1=new Image() image1.src="image1.jpg" var image2=new Image() image2.src="image2.jpg"

  4. 4

    Ajuste o tempo de exibição de cada imagem na apresentação. O exemplo a seguir configura um tempo de 2.500 milissegundos ou 2,5 segundos:

    setTimeout("slideit()",2500)

  5. 5

    Acrescente a função "slideit" na seção do JavaScript da página. A função é executada quando o limite de tempo acaba. O seguinte código a criará:

    function slideit(){ if (!document.images) return document.images.slide.src=eval("image"+step+".src") if (step<3) step++ else step=1 setTimeout("slideit()",2500) }

  6. 6

    Vá para a próxima imagem depois que o tempo se esgotar. O seguinte código avança a apresentação de slides para a próxima imagem na lista:

    document.images.slideshow.src=eval("image"+step+".src")

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível