Ir para conteúdo

Arquivado

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

Fall

[Resolvido] galeria dinamica

Por , em Javascript

Recommended Posts

Fall    0

Fall
Postado

Tenho esse arquivo (coloqei o css/javascript/html tud junto pra ajudar na visualização) q fiz onde ao clicar nas setinhas as fotos se movem tanto para esquerda como para direita...

 

Minha duvida é como q faço pra ao inves de elas se moverem apartir desse click, gostaria q elas se movessem com uam pressionada no botao do mouse e nao ir passando elas a cada clicada, tornando mais dinamico essa pequena galeria...

 

 

desde ja agradeço, segue abaixo o arquivo

 

<html>
	<head>
		<title>galeria</title>
		<script type="text/javascript">
		var numero = -335;

			function moveEsquerda() {
				if (numero < 0) {
					numero += 120;
					var posicao = numero+"px";
					document.getElementById("galeria").style.left = posicao;
				}
				}

			function moveDireita() {
				if (numero > -670) {
					numero -= 120;
					var posicao = numero+"px";
					document.getElementById("galeria").style.left = posicao;
				}
				}
		</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="#" onclick="moveEsquerda();"><</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="#" onclick="moveDireita();">></a>
		</div>

	</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Otata    4

Otata
Postado

da uma olhda ai..t+

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

surikaty    0

surikaty
Postado

Olá, sou novo no iMasters

Estou fazendo um site e preciso criar uma galeria dinâmica, exatamente como a discutida por vocês.

Mas acontece que tem de ser vertical. Já tentei aqui através do código de vcs, mas não consegui.

Se pudessem me ajudar....

Agradeço!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

programador php    0

programador php
Postado

Olá, sou novo no iMasters

Estou fazendo um site e preciso criar uma galeria dinâmica, exatamente como a discutida por vocês.

Mas acontece que tem de ser vertical. Já tentei aqui através do código de vcs, mas não consegui.

Se pudessem me ajudar....

Agradeço!!!

procure na sação de PHP

 

abraço

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