Ir para conteúdo

POWERED BY:

Arquivado

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

tonglet

Criar botão "Next" em galeria de imagens

Por , em Javascript

Recommended Posts

tonglet    0

tonglet
Postado

Olá, pessoas!

 

Estou tentando fazer uma exibiçãozinha de imagens em meu site, de modo que hajam thumbnails e setas de ida e volta.

Quanto aos thumbnails, com tutoriais e um pouco de dor de cabeça cheguei lá, mas já com as setas a coisa não está funcionando..

 

O código é o seguinte:

 

<script>

function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}

</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"

function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}


preloadimages("images/01.jpg","images/02.jpg","images/03.jpg")
</script>



<body>
<a href="java script:warp()"><img src="images/05.jpg" name="targetimage" border=0></a>
<a onClick="changeimage(myimages[0],this.href)">01</a>
<a onClick="changeimage(myimages[1],this.href)">02</a>
<a onClick="changeimage(myimages[2],this.href)">03</a>
<a onClick="gonext" >Próxima</a>

</body>
A questão é.. como eu faço essa função "gonext" aumentar em 1 o valor de 1, e fazer com que a targetimage seja recarregada?..

 

E é possível eu adicionar um "IF" à essa função "gonext", para se 1>15, ele recarregue os thumbnails (utilizando iframes)?

 

Muito muito obrigado ^^

 

editado por Otata 12/01/2009 08:26

Compartilhar este post

Link para o post
Compartilhar em outros sites

Otata    4

Otata
Postado

eae cara tudo beleza..

 

da uma olhada

 

<script>
var pos = 0;
var myimages;

function proxima(){
	if(this.pos == myimages.length - 1){
		document.getElementById("targetimage").src = myimages[0].src;
		this.pos = 0;
	}else{
		document.getElementById("targetimage").src = myimages[pos + 1].src;
		this.pos++;
	}
}
function anterior(){
	if(pos == 0){
		document.getElementById("targetimage").src = myimages[myimages.length - 1].src;
		this.pos = myimages.length -1;
	}else{
		document.getElementById("targetimage").src = myimages[this.pos - 1].src;
		this.pos--;
	}	
}

function changeimage(towhat,url){
	if (document.images){
		document.getElementById("targetimage").src = towhat.src;
		gotolink = url;
		this.pos = towhat.pos;
	}
}
function warp(){
	window.location=gotolink
}

</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"

function preloadimages(){
	for (i=0;i<preloadimages.arguments.length;i++){
		myimages[i] = new Image()
		myimages[i].src = preloadimages.arguments[i]
		myimages[i].pos = i;
	}
}


preloadimages("images.jpeg","images2.jpeg","images3.jpeg")
</script>

<a href="java script:warp()"><img src="images.jpeg" id="targetimage" border=0></a>
<a onClick="changeimage(myimages[0],this.href)">01</a>
<a onClick="changeimage(myimages[1],this.href)">02</a>
<a onClick="changeimage(myimages[2],this.href)">03</a>
<a onClick="anterior();" >Anterior</a>
<a onClick="proxima();" >Próxima</a>

t+

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