rodar a galeria de imagem

programador php · Março 4, 2008

opa!!

galera utilizei o seguinte script para fazer a galeria de imagem

<html>
	<head>
		<title>galeria</title>
		<script type="text/javascript">
				var numero = -335;
				var movimentaEsq = true;
				var movimentaDir = true;			
			function moveEsquerda() {
							this.init = function(){								
								movimentaEsq = true;
								move();																	  
							},									
					   this.move = function(){
							if (numero < 0) {
									numero += 120;
								   var posicao = numero;
									document.getElementById("galeria").style.left = posicao +"px";
									if(movimentaEsq){
										setTimeout("move()","300");
										}								
								}
					   },
					   this.stop = function(){
								  movimentaEsq = false;								 
					   }
					   init();
			 }
				function moveDireita() {
						
							this.init = function(){
									movimentaDir = true;
									move();														
							},									
					   this.move = function(){
							  if (numero > -670) {
									 numero -= 120;
									var posicao = numero;
									document.getElementById("galeria").style.left = posicao +"px";
									if(movimentaDir){
											setTimeout("move()","300");
										}								
								}
					   },
					   this.stop = function(){
								  movimentaDir = false;	
					   }
					   init();
			 }
		</script>
		
		<style type="text/css">
		
		body {
			width: 100%;
			height: 100%;
			margin: 0px;
			background: #000;
		}

		#painel {
			width: 600px;
			height:100px;
			float: left;
			background: #FFFF00;
		}

		#galeria {
			width: 1240px;
			height: 92px;
			padding: 4px 0px 4px;
			float: left;
			background: #00FFFF;
			text-align: center;
			position: relative;
			top: 0px;
			left: -335px;
		}

		.setas {
			width: 15px;
			height: 100px;
			float: left;
			text-align: center;
			background: #036;
			color:#fff;
			font:20px;
		}

		.fotos {
			width: 120px;
			height: 90px;
			float: left;
			background: #FFF;
			border: solid 1px #000;
		}

		#overflow {
			width: 570px;
			height:100px;
			float: left;
			background: #000066;
			overflow: hidden;
		}

		</style>
	
	</head>	
	<body>
		<div id="painel">
			<a class="setas" href="#" onmouseover ="moveEsquerda();" onmouseout = "new moveEsquerda().stop()"><</a>
		<div id="overflow">
		<div id="galeria">
			<img alt="foto 01" class="fotos" src="01.jpg" />
			<img alt="foto 02" class="fotos" src="02.jpg" />
			<img alt="foto 03" class="fotos" src="03.jpg" />
			<img alt="foto 04" class="fotos" src="04.jpg" />
			<img alt="foto 05" class="fotos" src="05.jpg" />
			<img alt="foto 06" class="fotos" src="06.jpg" />
			<img alt="foto 07" class="fotos" src="07.jpg" />
			<img alt="foto 08" class="fotos" src="08.jpg" />
			<img alt="foto 09" class="fotos" src="09.jpg" />
			<img alt="foto 10" class="fotos" src="10.jpg" />
		</div>
		</div>
			<a class="setas" href="#" onmouseover ="moveDireita();" onmouseout = "new moveDireita().stop()">></a>
		</div>

	</body>
</html>

gostaria de saber como posso fazer para quando chegar na imagem 10 ele voltar para a primeira, ficar uma especie de loop

e as imagens ficarem rolando sem ter que passar o mouse

se alguem puder me ajudar ficarei grato

abraço

Vadio · Março 4, 2008

num sei se funciona mas poe um onload="funcao" =D

programador php · Março 4, 2008

isso não vai funcionar porque ele vai para o lado....

ai se colocar na onload..

ele vai para o lado e num volta mais!!!

hehe

Vadio · Março 5, 2008

set_interval() ??

programador php · Março 5, 2008

set_interval() ??

mas onde eu coloco isso...

abraço

Vadio · Março 5, 2008

onmouseover="setInterval("moveEsquerda()",10000);

10000 = ms

programador php · Março 6, 2008

fiz um novo codigo....

agora esta funcionando mais ou menos da forma que eu quero...

a unica coisa que esta faltando é COLOCAR AS IMAGENS EM LOOP, POR EXEMPLO, QUANDO CHEGAR NA ULTIMA EXIBIR A PRIMEIRA E IR PASSANDO E NÃO PARAR

alguem saberia dizer??

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script>
function dG(idi){
	return document.getElementById(idi);
}
var numero = 1;
var movimentaEsq = true;
function rolarImagem(){
	  this.init = function(){								
	   	movimentaEsq = true;
		move();																	  
	},									
	this.move = function(){

			numero -= 1;
			if(numero <= -450){
				numero =1;
			}
			dG('teste').style.left = numero+"px";
			if(movimentaEsq){
				 setTimeout("move()","100");
			}								
	},
	this.stop = function(){
		  movimentaEsq = false;								 
	}
	init();
}

		   



</script>

<style>


#tudo {
			width: 450px;
			height:60px;
			background: #FFFF00;
		}

#imagens {
		 width: 400px;
			height:60px;
			float: left;
			overflow: hidden;}

#teste {

	
	height: 60px;
			padding: 4px 0px 4px;
			float: left;
			background: #00FFFF;
			text-align: center;
			position: relative;
			top: 0px;
			left: 20px;

}

#teste img {
	border: 1px ridge Black;
	float: left;
	width: 70px;
	height: 70px;
	padding:5px;
	margin-left: 5px;	
}
</style>

</head>

<body onload="rolarImagem();">
<div id="tudo" onmouseover ="new rolarImagem().stop();" onmouseout = "rolarImagem();">
	<div id="imagens">
		<div id="teste">	
			<img src="teste.jpg" />
			<img src="teste.jpg" />
			<img src="teste.jpg" />
			<img src="teste.jpg" />
			<img src="teste.jpg" />
			<img src="teste.jpg" />
			<img src="teste.jpg" />
			<img src="teste.jpg" />
			<img src="teste.jpg" />
			<img src="teste.jpg" />
			<img src="teste.jpg" />
			<img src="teste.jpg" />
			<img src="teste.jpg" />
			<img src="teste.jpg" />
		</div>
	</div>
</div>



</body>
</html>

programador php · Março 7, 2008

opa!!!

nesse codigo

<html>
	<head>
		<title>galeria</title>
		<script type="text/javascript">
		
		
		
				var numero = 0;
				var movimentaEsq = true;
				var movimentaDir = true;			
			function moveEsquerda() {
							this.init = function(){								
								movimentaEsq = true;
								move();																	  
							},									
					   this.move = function(){
							if(numero == 0){
							movimentaDir=true;
									 if(movimentaDir){
										setTimeout("moveDireita()","2000");
										}
							 }	  
							
							if (numero <= 0) {
									  numero += 10;
								   var posicao = numero;
									document.getElementById("galeria").style.left = posicao +"px";
									if(movimentaEsq){
										setTimeout("move()","100");
										}								
								}
					   },
					   this.stop = function(){
								  movimentaEsq = false;								
					   }
					   init();
			 }
				function moveDireita() {
						
							this.init = function(){
									movimentaDir = true;
									move();														
							},									
					   this.move = function(){
							  if(numero == -680){
									  movimentaEsq=true;
									 if(movimentaEsq){
										setTimeout("moveEsquerda()","2000");
										}
							   }	
							  if (numero >= -670) {
										numero -= 10;
									var posicao = numero;
									document.getElementById("galeria").style.left = posicao +"px";
									if(movimentaDir){
											setTimeout("move()","100");
										}								
								}
					   },
					   this.stop = function(){
								  movimentaDir = false;	
					   }
					   init();
			 }
			
			 function mover(){
				 if( movimentaDir ) {
					//moveDireita().init();
				}
				if( movimentaEsq ) {
					//moveEsquerda().init();
					
				}
				
			 }
			
			 function parademover(){
				 if( movimentaDir ) {
					new moveDireita().stop();
					
				}
				if( movimentaEsq ) {
					new moveEsquerda().stop();
					
				}
				
			 }
			
			
			
			
		</script>
		
		<style type="text/css">
		
		body {
			width: 100%;
			height: 100%;
			margin: 0px;
			background: #000;
		}

		#painel {
			width: 600px;
			height:100px;
			float: left;
			background: #FFFF00;
		}

		#galeria {
			width: 1240px;
			height: 92px;
			padding: 4px 0px 4px;
			float: left;
			background: #00FFFF;
			text-align: center;
			position: relative;
			top: 0px;
			left: 0px;
		}

		.setas {
			width: 15px;
			height: 100px;
			float: left;
			text-align: center;
			background: #036;
			color:#fff;
			font:20px;
		}

		.fotos {
			width: 120px;
			height: 90px;
			float: left;
			background: #FFF;
			border: solid 1px #000;
		}
		/***  TAMANHO DA DIV ONDE AS IMAGENS VÃO ROLAR **/

		#overflow {
			width: 570px;
			height:100px;
			float: left;
			background: #000066;
			overflow: hidden;
		}

		</style>
	
	</head>
	
	
	  
	<body onload="setTimeout('moveDireita()', '2000')">
		<div id="painel">
			<a class="setas" href="#" onmouseover ="moveEsquerda();"><</a>
		<div id="overflow">
		<div id="galeria"  onmouseover ="parademover();" onmouseout="mover();">
			<img alt="foto 01" class="fotos" src="01.jpg"/>
			<img alt="foto 02" class="fotos" src="02.jpg"/>
			<img alt="foto 03" class="fotos" src="03.jpg"/>
			<img alt="foto 04" class="fotos" src="04.jpg"/>
			<img alt="foto 05" class="fotos" src="05.jpg"/>
			<img alt="foto 06" class="fotos" src="06.jpg"/>
			<img alt="foto 07" class="fotos" src="07.jpg"/>
			<img alt="foto 08" class="fotos" src="08.jpg"/>
			<img alt="foto 09" class="fotos" src="09.jpg"/>
			<img alt="foto 10" class="fotos" src="10.jpg"/>
		</div>
		</div>
			<a class="setas" href="#" onmouseover ="moveDireita();">></a>
		</div>

	</body>
</html>

estou com 3 problemas

1º

como que eu faço para quando o cara tirar o mouse de cima da div que coloquei para fazer a movimentação ele continue o movimento que estava fazendo ou seja para a direita ou para a esquerda

2º

porque as vezes ele fica bem rapido... é algo no código ou é coisa de navegador mesmo

3º

como que eu poderia fazer para que quando chegar na ultima imagem (no caso 10) ele ir aparecendo a primeira imagem e não fazer o efeito de voltar as imagens

valeu e abraçoo

programador php · Março 13, 2008

consegui resolver os problemas em partes

<script>
//<![CDATA[
var Rollar = "sim";
var roll = 0;
function Fmarquee(tmp,tipo){
	var Marquee = document.getElementById("marquee");
	var Caixa = document.getElementById("caixa");
	var Altura = Caixa.clientHeight;

	
   
	
	
	if (tipo == "left"){
	   if(roll == -<?php echo $valor; ?>){
			roll = 0;
			monta();
		} 
		roll--;
		Marquee.style.left = roll+"px";
	} else if (tipo == "right"){
	   if(roll == 0){
	   		roll = -<?php echo $valor; ?>;
			monta();
		} 
		roll++;
		Marquee.style.left = roll+"px";
	}
	if(Rollar == "sim"){
		setTimeout("Fmarquee("+tmp+",'"+tipo+"')",tmp);
	}
}
function playM(local){
	Rollar = "sim";
	Fmarquee('50',local);
}

function stopM(){
	Rollar = "nao";
}

function OnloadB(){
	Rollar = "sim";
	Fmarquee('50','left');
}

  var imagens = document.getElementById('marquee').innerHTML;
  function monta(){
	document.getElementById('marquee').innerHTML = imagens + imagens;
  }
	   
		
	   </script>

o problema é que como faço o innerHTML duas vezes iguais ele vai deixando a página mais pesada!!!

cada vez mais queria saber se tem como resolver isso

abraço

Arquivado

rodar a galeria de imagem

Recommended Posts

programador php 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Vadio 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

programador php 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Vadio 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

programador php 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Vadio 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

programador php 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

programador php 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

programador php 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante