às vezes, uma única imagem não é suficiente para mostrar tudo o que você deseja promover em seu site. Se você já se perguntou como alguns sites obtêm várias imagens para girar e gostaria de fazer isso sozinho, bem, não se pergunte mais. Estou aqui para te mostrar como é feito. Além disso, como um benefício adicional, mostrarei como você pode atualizar suas imagens em um local e fazer com que essas atualizações apareçam globalmente em seu site.
digamos que você tenha um site de culinária e queira fotos das cinco refeições mais recentes que você apresentou para girar no banner. Ou, digamos que você tenha um site imobiliário e queira que as fotos de suas 10 listagens mais recentes girem em um local específico em todas as suas páginas. Para adicionar funcionalidade, você deseja que cada imagem vincule a uma página diferente. Tudo isso não é problema com o seguinte código.
primeiro, você precisa se organizar. Colete todas as suas imagens na mesma pasta e certifique-se de que elas tenham o mesmo tamanho. Se eles não tiverem o mesmo tamanho e você não quiser distorcê-los, basta redimensionar a tela de cada imagem e não redimensionar a própria imagem. Dessa forma, o espaço reservado onde as imagens aparecem não mudará de forma à medida que cada nova imagem for exibida.
em segundo lugar, colete todos os links que você deseja associados às imagens e salve-os em algum lugar conveniente para que você possa copiá-los e colá-los mais tarde.
em terceiro lugar, você precisa colar o seguinte no cabeçalho para cada página que deseja que o rotador de imagem apareça:
<script language="JavaScript1.2″>var howOften = 5; //number often in seconds to rotate
var current = 0; //start the counter at 0
var ns6 = document.getElementById&&!document.all; //detect netscape 6// place your images, text, etc in the array elements here
var items = new Array();
items="<a href='link.htm' ><img alt='image0 (9K)' src=' /Images/image0.jpg' height='300′ width='300′ border='0′ /></a>"; //a linked image
items="<a href='link.htm'><img alt='image1 (9K)' src='/Images/image1.jpg' height='300′ width='300′ border='0′ /></a>"; //a linked image
items="<a href='link.htm'><img alt='image2 (9K)' src='/Images/image2.jpg' height='300′ width='300′ border='0′ /></a>"; //a linked image
items="<a href='link.htm'><img alt='image3 (9K)' src='/Images/image3.jpg' height='300′ width='300′ border='0′ /></a>"; //a linked image
items="<a href='link.htm'><img alt='image4 (9K)' src='/Images/image4.jpg' height='300′ width='300′ border='0′ /></a>"; //a linked image
items="<a href='link.htm'><img alt='image5 (18K)' src='/Images/image5.jpg' height='300′ width='300′ border='0′ /></a>"; //a linked image
function rotater() {
document.getElementById("placeholder").innerHTML = items;
current = (current==items.length-1) ? 0 : current + 1;
setTimeout("rotater()",howOften*1000);
}function rotater() {
if(document.layers) {
document.placeholderlayer.document.write(items);
document.placeholderlayer.document.close();
}
if(ns6)document.getElementById("placeholderdiv").innerHTML=items
if(document.all)
placeholderdiv.innerHTML=items;current = (current==items.length-1) ? 0 : current + 1; //increment or reset
setTimeout("rotater()",howOften*1000);
}
window.onload=rotater;
//–>
</script>
à primeira vista, esse código pode parecer intimidante. No entanto, tudo o que você precisa fazer é atualizar o caminho para os arquivos de imagem e preencher os URLs dos links. Claro, Você também deve atualizar os atributos de altura e largura para se adequar ao seu site.
se você deseja apenas quatro imagens para girar, basta excluir uma das linhas do item. Se você quiser adicionar um, copie e cole e atualize itens para itens e assim por diante.
agora você lançou o trabalho de base para adicionar este rotador de imagem ao seu site. Mas há mais uma etapa que você precisa fazer para que suas imagens apareçam na página. Descubra onde você deseja que as imagens apareçam na página e copie:
<layer id="placeholderlayer"></layer><div id="placeholderdiv"></div>
isso é tudo o que há para isso. Quando comecei a trabalhar na adição de um rotador de imagens ao meu site, não foi tão fácil quanto copiar e colar. Eu passei por vários exemplos diferentes de código que encontrei online. A maioria deles não funcionou. Este código acima também não funcionou, mas então fiz alguns ajustes aqui e ali e consegui fazê-lo funcionar. Fiz a parte mais difícil por ti. Agora tudo que você tem a fazer é atualizar suas imagens e links, fazer um pouco de cópia e colar, e longe você vai.
se você decidir usar este rotador de imagens em várias páginas diferentes dentro do seu site e depois precisar alterar as imagens e o conteúdo, poderá fazê-lo em um local. No entanto, isso requer algum planejamento com antecedência. Vamos voltar ao exemplo de um site imobiliário. Ao salvar as imagens, recomendo usar a mesma convenção para cada imagem, por exemplo, “House1.jpg ” e ” House2.jpg ” e assim por diante. Então, quando você quiser mostrar uma nova série de casas, basta nomear as novas imagens usando os mesmos nomes de arquivo de antes. Dessa forma, todas as suas páginas mostrarão as novas imagens depois que o navegador limpar o cache ou você atualizar a página.
o mesmo funciona para cada um dos links. Minha recomendação é nomear cada um .arquivo htm, ” House1.htm ” e ” House2.htm ” e assim por diante. Dessa forma, tudo que você precisa fazer é atualizar o conteúdo dentro do .os arquivos htm e os links no image rotator apontarão automaticamente para o novo conteúdo.