Programação  
 
Conhecimento computador >> Programação >> JavaScript Programação >> 
Como girar um Div em JavaScript
A página inicial para muitos sites hoje contém uma série de imagens que giram ou deslizar dentro e fora da página. Essa funcionalidade é implementada através da criação de uma marca única
com várias imagens e usar o método JavaScript " setInterval " para girar a
em um horário programado para que apenas uma imagem é exibida de cada vez. A rotação JavaScript é muitas vezes acompanhada por efeitos de animação que se desvanecem ou slide imagens ou texto dentro e fora do
. A biblioteca jQuery fornece uma maneira fácil de selecionar imagens e implementar uma rotação animado. Instruções
1

Crie um novo documento HTML utilizando o bloco de notas ou um editor HTML. Insira os cabeçalhos HTML no documento :

< HTML DOCTYPE >




Rotate Div
2

Criar um estilo CSS para a

para ser rodados. Defina a posição , largura, altura e cor de fundo para o
. Desativar a exibição de imagens no
e ativar a exibição da imagem com o nome da classe "ativo" :


< br > 3

Insira a biblioteca jQuery no documento , incluindo-a a partir de uma fonte pública , como APIs do Google :

< script src = " https://ajax.googleapis.com/ajax/libs /jquery/1.6.1/jquery.min.js ">
4

Adicione o código JavaScript para girar as imagens no

. Encontre a imagem com a classe "ativo " e selecione a imagem seguinte na lista. Se o tamanho da próxima imagem é zero, começar a voltar ao início da lista com a primeira imagem :

função rotate ( ) { var =

ativos $ ("# rodar ativa. ");

if ($ (". . . # rodar ativo " ) . . next () comprimento > 0)

var next = $ (" # rodar ativo " ) ao lado ();

mais

var next = $ ("# rodar img : primeiro ");
5

desbotar a imagem com a classe "ativo" para fora e desaparecer a próxima imagem dentro Remova a classe "ativo" a partir da imagem atual e atribuí-lo para a próxima imagem :

active.fadeOut ( " rápido " , function ()
6

Definir um temporizador para girar as imagens a cada cinco segundos , utilizando o método " setInterval " : .

$ (document) ready (function () {

setInterval ( " girar () " , 5000) ;

});


< /head>
7

Insert

no corpo do documento e atribuir a classe "ativo" para a primeira imagem :



 Image1

 Image2

Image3 ;

Image4

< /div >



8

Salve o documento. Abra-o no um navegador e assistir as imagens nos

girar na tela, entrando e saindo a cada cinco segundos .

Anterior :

Próximo : No
  Os artigos relacionados
·Como usar vários plugins com JW Player 
·JavaScript : Apostrophe Problema na URL 
·Como fazer uma ligação Bounce Com jQuery 
·Como adicionar um hiperlink para uma legenda de LightBo…
·Como usar JavaScript desenvolvedor 
·Como desenhar uma árvore usando uma lona em JavaScript…
·Como rastrear lentamente em JavaScript 
·Quais são Closures Bom para em JavaScript 
·Como girar Texto de Licenciatura em JavaScript 
·Como remover um manipulador de eventos em TinyMCE 
  Artigos em destaque
·Como usar o GridView em C # 
·Como fechar o Word de um script VBA 
·Como construir aplicativos de 32 bits do Linux em plata…
·Struts Java Tutorial 
·Java Duplo Formatação 
·Como escrever um programa em C para encontrar a série …
·Como converter um texto para PDU 
·Como Anexar a um processo Java em execução 
·Como usar Skyboxes em GtkRadiant 
·O que é o Java Console 
Cop e direita © Conhecimento computador http://ptcomputador.com Todos os Direitos Reservados