Publicado em 12 de set.

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

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!

Discussão (2)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

André do Vale· 14 de set.

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:

Pablo RD· 17 de set.

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...