Ir para conteúdo

POWERED BY:

Arquivado

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

ebotega

Para uma transição de imagens

Por , em Javascript

Recommended Posts

ebotega    2

ebotega
Postado

Olá pessoal, queria saber como parar um efeito de transição, tenho os scripts abaixo.

 

 

Uma página simples html.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title>slayeroffice | code | image cross fade redux</title> 
<link rel="stylesheet" type="text/css" href="xfade2_o.css" /> 
<script type="text/javascript" src="xfade2.js"></script> 
</head> 

<body> 
<div id="imageContainer">
<img src="imagens/1 (1).jpg" alt="" width="600" height="450" />
        <img src="imagens/1 (2).jpg" alt="" width="600" height="399" />
        <img src="imagens/1 (3).jpg" alt="" width="600" height="402" />
        <img src="imagens/1 (4).jpg" alt="" width="600" height="449" />
</div> 
</body> 
</html>

 

e um js para a trasição de imagens

window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;

function so_init() {
if(!d.getElementById || !d.createElement)return;

// DON'T FORGET TO GRAB THIS FILE AND PLACE IT ON YOUR SERVER IN THE SAME DIRECTORY AS THE JAVASCRIPT!
// http://slayeroffice.com/code/imageCrossFade/xfade2.css
css = d.createElement("link");
css.setAttribute("href","xfade2.css");
css.setAttribute("rel","stylesheet");
css.setAttribute("type","text/css");
d.getElementsByTagName("head")[0].appendChild(css);

imgs = d.getElementById("imageContainer").getElementsByTagName("img");
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = "block";
imgs[0].xOpacity = .99;

setTimeout(so_xfade,3000);
}

function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;

nOpacity = imgs[nIndex].xOpacity;

cOpacity-=.05; 
nOpacity+=.05;

imgs[nIndex].style.display = "block";
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;

setOpacity(imgs[current]); 
setOpacity(imgs[nIndex]);

if(cOpacity<=0) {
	imgs[current].style.display = "none";
	current = nIndex;
	setTimeout(so_xfade,1000);
} else {
	setTimeout(so_xfade,50);
}

function setOpacity(obj) {
	if(obj.xOpacity>.99) {
		obj.xOpacity = .99;
		return;
	}
	obj.style.opacity = obj.xOpacity;
	obj.style.MozOpacity = obj.xOpacity;
	obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
}

}

 

 

Peguei na net esse exemplo até porque não manjo nada de javascript, mas gostaria de uma ajuda para parar a transição de imagens quando coloco o mouse um cima, tipo com o onmouseover.

 

Alguma ideia?

 

:mellow:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Anderson web    1

Anderson web
Postado

Olá Brother ,

 

Estou utilizando o Jquery com o plugin Cycle para transição de imagens, segue código abaixo como exemplo, Lembre de incluir as imagens.

 

Mais informações acesso o site do projeto Jquery Cycle

 

<!DOCTYPE html>

<html>

<head>

<title></title>

<style>


#controls { width: 160px; height: 25px;margin-left:270px;}

#slideshow{width: 415px; height: auto;}

/*
#prev { float: left; }

#next { float: right; }
*/
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script src="https://github.com/malsup/cycle/raw/master/jquery.cycle.all.js"></script>

<script>

$(document).ready(function() {



   // init and stop the inner slideshows

   //var inners = $('.inner-slideshow').cycle().cycle('stop');

 $('#slideshow').cycle({

       fx: 'fade',

       speed: 300,

       timeout: 4000,

       prev: '#prev',

       next: '#next',

       pause:0



   });

$('#pause').click(function() {
 $('#slideshow').cycle('pause');
});

$('#play').click(function() {
   $('#slideshow').cycle('resume');
});


});


</script>

</head>

<body>


   <div id="slideshow">



<img src="img1.jpg" width="410" height="300">

<img src="img2.jpg" width="410" height="300">

<img src="img3.jpg" width="410" height="300">


   </div>



   <div id="controls">
       <a id="prev" href="#">Voltar</a>
       <a id="pause" href="#">Pause</a>
       <a id="play" href="#">Play</a>
        <a id="next" href="#">Próximo</a>
        </div>

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

ebotega    2

ebotega
Postado

Cara, é bem isso que eu estava imaginando mesmo, um controle para as imagens do banner. O que eu procuro na verdade é um tuto pra fazer um banner tipo do submarino... americanas... sabe, que as imagens ficam mudando e tem um indicativo do número da imagem ou qualquer outra coisa que dê pra parar a animação, mas gostaria que algo em javascript, não em flash.

 

Vou tentar adaptar isso, mas enquanto isso se pintarem mais ideias... tamo aí.

:D

Compartilhar este post

Link para o post
Compartilhar em outros sites

Anderson web    1

Anderson web
Postado

Olá Brother ,

 

O que te passei não é flash é Javascript utilizando Jquery. Segue exemplo de como você quer utilizando o plugin Cycle do Jquery.

 

http://jquery.malsup.com/cycle/start.html

 

Aqui também você encontra vários tipos de transições do plugin:

http://jquery.malsup.com/cycle/more.html

 

Você terá que alterar o tamanho das imagens.

 

Abraços ,

Compartilhar este post

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

Informação importante

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

  Aceito