[JavaScript]Mała galeria w JS Opcje

[piotr485]

Witam, jako, że dopiero zaczynam przygodę z JS - próbuję stworzyć galerię i przyciski do niej "następne zdjęcie", "poprzednie zdjęcie".

Napisałem taki kod:

[HTML] pobierz, plaintext 
<a href="#" onclick="nastepne();">nastepne</a>
 
var fotki = new Array (
	"1.jpg",
	"2.jpg",
	"3.jpg",
	"4.jpg",
	"5.jpg",
	"6.jpg",
	"7.jpg",
	"8.jpg"
);
 
function nastepne(){
document.write("<img src=\"" + fotki[1] + "\">");
}
[HTML] pobierz, plaintext 

Problem w tym, że nie wiem jak przekazać do fotki[1], za każdym kliknięciem dodanie +1 - trzeba to zrobić za pomocą pętli czy jak ?
Proszę o nakierowanie.

P.S. Byc może od złej strony się do tego zabieram ?

[Spawnm]

Poczytaj o getElementByID[] oraz innerHTML .
document.write do galerii raczej się nie stosuje

[skowron-line]

Do tego co napisał Spawnm dodaczytaj jeszcze o setAttribute tak byś mógł zmieniać atrybut <img> bo po co wstawiać do np<div> ciągle nowy obiekt img jak można w jednym tylko podmieniać źródło.

[piotr485]

Dobra więc napisałem sobie coś takiego i już umiem poprzez kliknięcie zmienic id dla stylów, ale jak to zrobic dla tekstu ?

Napisałem:

[HTML] pobierz, plaintext 
<a href="#" onclick="nastepne();">nastepne</a>
<img src="1.jpg" id="nastep" style="border: 3px solid red;">
 
<script type="text/javascript">
 
function nastepne(){
	var next = document.getElementById('nastep');
	next.style.border = "10px solid blue";
}
</script>
[HTML] pobierz, plaintext 

Ale jak się odwołac do 1.jpg ? zeby zamienic je np. na 2.jpg ? I czytalem o tym innerHTML i sie doczytalem ze nie powinno sie go stosowac - chyba ze jest stosowany z rozwaga.

[skowron-line]

Ale jak się odwołac do 1.jpg ? zeby zamienic je np. na 2.jpg ? I czytalem o tym innerHTML i sie doczytalem ze nie powinno sie go stosowac - chyba ze jest stosowany z rozwaga.

Napisałem Ci setAttribute

[HTML] pobierz, plaintext 
var next = document.getElementById('nastep');
next.style.border = "10px solid blue";
[HTML] pobierz, plaintext 

dajesz

[HTML] pobierz, plaintext 
next.src = '2.jpg';
//lub
next.setAttribute( 'src', '2.jpg' );
[HTML] pobierz, plaintext 

[piotr485]

Zastosowałem to z innerHTML tyle, że jak pisałeś wczesniej po co za kazdym razem dawac to w div'a.

Teraz mam tak:

[HTML] pobierz, plaintext 
<a href="#" onclick="nastepne();">nastepne</a>
<img src="1.jpg" id="nast">
 
 
<script type="text/javascript">
var fotki = new Array (
	"1.jpg",
	"2.jpg",
	"3.jpg",
	"4.jpg",
	"5.jpg",
	"6.jpg",
	"7.jpg",
	"8.jpg"
);
 
 
 
 
function nastepne(){
 
	var next = document.getElementById('nast');
	next.src = fotki[1];
 
}
</script>
[HTML] pobierz, plaintext 

Jak za każdym kliknięciem dodać +1 do fotki[1] trzeba to zrobic za pomoca petli for ? jesli tak to jaki powinnien byc wynik tej petli nie mowie o gotowcu tylko o wyniku tej petli a nie kodzie ktory tworzy ta petle

[skowron-line]

[HTML] pobierz, plaintext 
var i =0;
function nastepne(){
 
	i++;
	var next = document.getElementById('nast');
	next.src = fotki[ i ];
 
}
[HTML] pobierz, plaintext 

Ale teraz zobacz funkcję length do sprawdzania ilosci elementów w tablicy i warunki IF żeby ograniczyć możliwość przerzucania zdjęć.