Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Pablo RD

"Deslizar" imagem (sprite) de uma <div> ou <img&#6

Por , em Desenvolvimento frontend

Recommended Posts

Pablo RD    5

Pablo RD
Postado

Olá,

 

Tenho uma div com um img dentro. É pra ser uma prévia de um catálogo, então aparece duas páginas do catálogo aí. Mas quero que a cada certa quantidade de tempo essa duas páginas mudem para as outras duas seguintes.

 

Penso que pode ser feito como um CSS Sprite: Uma imagem grande horizontalmente usada como bg de uma div, que vai mudando de posição a cada x segundos.

 

Podem me demonstrar como fazer e o que usar para isso? Só sei um pouco de HTML e CSS, e não sei por qual assunto pesquisar, jQuery, HTML5, JS, ou o quê...

 

Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

Olha só, enquanto os navegadores sem suporte a CSS3 ainda tiverem uma parcela significante dos usuários, eu continuarei optando por alguma solução em javascript (no caso, jQuery).

 

Mas caso queira, sua solução pode sim ser feita em CSS3. A exemplo: http://css3.bradshawenterprises.com/sliding/ (neste exemplo é usado jQ para a interação do click e CSS)

 

Só acrescendo: sua dúvida ficou um tanto quanto dispersa. Caso o exemplo acima não se encaixe, tente nos exemplificar o que você deseja. :thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Pablo RD    5

Pablo RD
Postado

Olha, achei um script que serve pata mim por enquanto:

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Rotating Banners</title>
<script language="Javascript" type="text/javascript">
<!-- Hide from old browsers
adImages = new Array("images/banner.jpg","images/banner1.jpg","images/banner2.jpg")
thisAd = 0
imgCt = adImages.length
function rotate() {
if (document.images) {
thisAd++
if (thisAd == imgCt) {
thisAd = 0
}
document.adBanner.src=adImages[thisAd]
setTimeout("rotate()", 1 * 1000)
}
}
// End hide script from old browsers -->
</script>
</head>
<body onload="rotate()">
<center>
<img src="images/banner1.gif" name="adBanner" alt="Ad Banner" />
</center>
</body>
</html>

 

 

Se quiser baixar e testar facilmente: http://www.mediafire.com/?vp09itzwzbcc1v6

 

Confesso que ainda não entendi bem o script, mas já estou começando a entender variáveis, funções e operadores...

 

Agora, alguém pode me ajudar a criar uma transição mais suave? É só mais isso que preciso...

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito