[Resolvido] galeria dinamica
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>Discussão (5)
Carregando comentários...