capacidade de JavaScript para acessar o DOM ( Document Object Model) da página Web dá aos desenvolvedores da Web os meios para mudar dinamicamente os atributos de qualquer HTML ( Hypertext Markup Language ) elemento. O método JavaScript getElementById () permite a mudança programador largura de uma marca
, altura, fronteiras e até mesmo o "src ", ou propriedade de origem da imagem. As imagens podem mudar de forma aleatória ou sequencialmente. A marca
devem ser rotulados com um ID antes que o método getElementById () pode acessá-lo. Função de temporização Banner Image Mudanças
de JavaScript setInterval () desencadeia os acontecimentos após um período definido de tempo decorrido , e vai continuar a disparar o evento , a menos que seja interrompido pelo método clearInterval (). SetInterval () usa dois parâmetros: a função que você deseja executar e , a quantidade de tempo de espera antes de executá-lo. Você pode ter setInterval () chamar um script que roda a fonte de imagem bandeira a cada poucos segundos ou de forma aleatória. O trecho de programa abaixo chama uma função que muda a bandeira a cada cinco segundos
Acessando o Tag imagem Através do DOM
a função JavaScript chama de " getElementById () " e " getElementsByName ()" pode acesso e manipular a página da Web DOM. " GetElementById ()" pode chegar a elementos HTML diretamente. Por outro lado , " getElementsByName ()" lojas de todos os elementos de mesmo nome na página da Web em uma matriz. Para alterar uma marca específico , por exemplo , deve ser dado um nome de classe única ou ID. Uma vez que cada banner pode ser representada pelo seu próprio ID , o " getElementById (): é o método mais simples de usar A declaração a seguir irá acessar um tag com o ID de . " Ad " e altere a sua fonte de imagem para" banner2 . . . " src = jpg "
document.getElementById ( "ad ) " banner2.jpg ";
banner Randômico rotação da imagem
Seus banners podem ser programados para mudar de forma aleatória e não sequencialmente . a função JavaScript Math.random () gera um número aleatório entre 0 e 1. Multiplicando esse número por 3 produz um número aleatório que varia entre 0 e 3. The Math função. floor () arredonda o número para um inteiro. Finalmente, a adição de um 1 ao resultado limita o conjunto de números 1 , 2 ou 3. a função a seguir substitui aleatoriamente um de três imagens armazenadas em uma matriz que é chamado de anúncios .
função changeAd () {
NextBannerImage = 1 + Math.floor ( Math.random () * 3);
document.getElementById ( "ad" ) . src = anúncios [ NextBannerImage ]; .
}
Sequential bandeira rotação da imagem
seus banners também pode ser programado para mudar sequencialmente Se você tem um conjunto de três imagens de banner , você pode criar um script para exibir o primeiro , segundo e terceiro elemento na matriz , em seguida, iniciar a contagem de novo. Cada vez que o changeAd () função abaixo é chamado, um 1 é adicionado ao contador " NextBannerImage " ea imagem seguinte na matriz é feita a fonte tag . uma vez que a contagem chega a 3 , o contador será reposto a 0 . Use a função setInterval () para chamar isso depois de um intervalo de tempo definido.
var NextBannerImage = 0; //global variável acessíveis para a função
função changeAdBanner () {
NextBannerImage + +;
document.getElementById ( "ad" ) src = anúncios [ NextBannerImage ]; .
if ( NextBannerImage == 3)
{
NextBannerImage = 0; }
}