Javascript cambio immagini

**meffiu86** · 05-07-2011, 12:28

Salve a tutti! Ho questa situazione: 2 bottoni ( + e -) e un immagine di partenza.

Avrei bisogno di un javascript con questo tipo di funzionamento: click sul pulsante (+) e mi passa all'img1, click sempre sul pulsante (+) mi va all'img2. Ora se clicco il pulsante (-) mi deve tornare all'immagine precedente (img1), e ancora se clicco di nuovo il + mi ritorna all'img2. Quindi un cambio dinamico delle immagini avanti e indietro.

Questo funzionamento per più immagini(io ne ho 10). Quindi posso poter cliccare il pulsante + fino all'img10 e poi poter tornare indietro in maniera decrescente a mio piacimento:
img9 --> img8 --> img7 .

Spero di essere riuscito a far capire quello che voglio.

Grazie mille!!

**longilineo** · 05-07-2011, 12:56

Codice PHP:


[img]img1.jpg[/img]


<button id='prev'>-</button> | <button id='next'>+</button>



<script type='text/javascript'>

next = document.getElementById('next');

prev = document.getElementById('prev');

img  = document.getElementById('myImg');

numImg = 1;

next.onclick = (function(){

    numImg++;

    if(numImg == 11)numImg = 1;

    img.src = "img"+numImg+".jpg";

});

prev.onclick = (function(){

   numImg--;

   if(numImg == 0) numImg = 10;

   img.src = "img"+numImg+".jpg";

});

</script>

**meffiu86** · 05-07-2011, 13:00

Ok però non riesco a capire come e dove assegargli le altre immagini da visualizzzare. Grazie mille!

**carlomarx** · 05-07-2011, 13:31

Soluzione alternativa:

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pagina vuota</title>
<script type="text/javascript">
	function imgNav(nDelta) {
		var oImg = document.getElementById("myImg");
		oImg.src = oImg.src.replace(/\d+/, function (sIndx) { return (((parseFloat(sIndx) + 9 + nDelta) % 10) + 1).toString(); });
	}
</script>
</head>

<body>

[img]img1.jpg[/img]

<button id='prev' onclick="imgNav(-1);">-</button> | <button id='next' onclick="imgNav(1);">+</button>

</body>
</html>

Cambiando l'argomento di imgNav in onclick="imgNav(-1);" puoi scorrere di un numero grande a piacere (es. onclick="imgNav(-5);")

**longilineo** · 05-07-2011, 13:50

assegnare le immagini a che cosa?

In javascript ti limiti ad alterare gli attributi di alcuni elementi della pagina html(nel tuo caso l'attributo src dell'elemento con id myImg), non è come un linguaggio lato server che ti consente di lavorare sul file vero e proprio, quindi la tua domanda ha poco senso.

Il funzionamento del mio script si basa su due prerequisiti:
- le immagini da visualizzare si chiamano img1.jpg, img2.jpg, img3.jpg, ..., img10.jpg
- le immagini da visualizzare si trovano nella stessa cartella del file html.

Se dovessero venir meno i 2 prerequisiti dovresti adattare il codice:

Codice PHP:




[img]images/colline.jpg[/img]


<button id='prev'>-</button> | <button id='next'>+</button> 



<script type='text/javascript'>

//inserisci i percorsi delle immagini in un array

myImages = new Array("images/colline.jpg", "images/monti.gif", "images/mare.png");



next = document.getElementById('next');

prev = document.getElementById('prev');

img  = document.getElementById('myImg');

numImg = 0;

next.onclick = (function(){

    numImg = (numImg + 1)%myImages.length;

    img.src = myImages[numImg];

});

prev.onclick = (function(){

   numImg--;

   if(numImg == -1) numImg = myImages.length-1;

   img.src = myImages[numImg];

}); 

</script>

è tutto molto semplice se non capisci qualcosa ti mancano le basi di programmazione

**carlomarx** · 05-07-2011, 14:03

Originariamente inviato da longilineo
assegnare le immagini a che cosa?

[…]

è tutto molto semplice se non capisci qualcosa ti mancano le basi di programmazione

@longilineo
Piano con le offese. Immagino intendesse chiedere come si fa a scorrere delle immagini che non hanno un nome ordinato nel formato (stringa + numero + estensione), ma immagini ciascuna con un nome proprio. I codici che abbiamo postato sono infatti per quel tipo di formato. Se è invece questo quello che vuole è ancora più semplice:

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pagina vuota</title>
<script type="text/javascript">
	var aImagesList = ["uno.jpg", "due.gif", "tre.jpg", "quattro.svg", "cinque.jpg", "sei.bmp", "sette.png", "otto.gif", "nove.jpg", "dieci.png"];
	aImagesList.selectedIndex = 0;

	function imgNav(nDelta) {
		document.getElementById("myImg").src = aImagesList[aImagesList.selectedIndex = (aImagesList.selectedIndex + aImagesList.length + nDelta) % aImagesList.length];
	}
</script>
</head>

<body>

[img]uno.jpg[/img]

<button id='prev' onclick="imgNav(-1);">-</button> | <button id='next' onclick="imgNav(1);">+</button>

</body>
</html>

**meffiu86** · 05-07-2011, 15:02

//inserisci i percorsi delle immagini in un array
myImages = new Array("images/colline.jpg", "images/monti.gif", "images/mare.png");

Ok era proprio questa parte che mi mancava. Forse non mi sono espresso bene, comunque si, non sono un esperto di codice perchè faccio il grafico, sennò non stavo neanche qua a chiedere una mano. Grazie lo stesso..

**longilineo** · 05-07-2011, 15:54

Non voleva essere un'offesa, se si conoscono gli array e si sanno scorrere, si sa come affrontare il problema.

Conoscere le basi della programmazione non può prescindere dalla conoscenza di strutture quali gli array.

Se le conoscenze ci fossero state la domanda sarebbe stata posta in maniera meno ambigua e ne io ne carlomarx avremmo cercato di risolvere il problema sbagliato, o comunque adattare i nostri script all'esigenza sarebbe stata una cosa immediata e che non avrebbe richiesto un ulteriore intervento.

Detto questo, ci tengo a precisare che non era mia intenzione offendere nessuno, tuttavia anche a costo di sembrare offensivo, penso che sia opportuno prima di chiedere codice che potrebbe non essere compreso studiare le cose basilari, il copia e incolla non fa bene a nessuno.

**carlomarx** · 05-07-2011, 17:40

@longilineo
Il punto è che chi chiede aiuto qui non è tenuto a conoscere le basi della programmazione, ha il diritto di essere un novizio al 100% e ha anche il diritto di volerci restare e di non voler imparare nulla di javascript. Sta a quelli più esperti decidere quanta pazienza concedere per spiegare l'abc a chi è totalmente a digiuno o di non rispondere e passare la palla ad altri con più voglia. È vero che è meglio capire che fare copia-incolla, ma non puoi certo imporlo. E soprattutto rimane un problema di chi beneficia dell'aiuto il come gestirlo. Quello che resta al forum è comunque un problema affrontato in più e una discussione che servirà ad altri. Ripeto, chi non ha le basi della programmazione, come anche chi non sopporta javascript, ha diritto di chiedere aiuto. Rispondere non è obbligatorio. Quello che ti contestavo era l'atteggiamento.

**longilineo** · 05-07-2011, 18:17

Siamo in pieno off topic, comunque in ogni forum che si rispetti prima dell'iscrizione si legge e accetta un regolamento, un comma comune a tutti questi regolamenti è non fare domande che hanno già trovato risposta in altri topic, e usare un motore di ricerca per vedere se altrove si trova una soluzione, di conseguenza per rispettare questa regola occore che, prima di fare domande su un certo argomento, ci si informi sugli argomenti basilari.

Io personalmente non sono un tipo che risponde 'cercatelo su google', anzi se dovessi limitarmi a dare una risposta del genere non risponderei per niente e su questo punto siamo perfettamente d'accordo, ma se un utente si mostra novizio al 100% magari lo aiuto le prime volte, ma non posso non consigliargli per il futuro di colmare alcune lacune, se poi si è dell'opinione che a nessuno piace ricevere consigli gratuiti, muore in generale il concetto di forum.

Sono dell'opinione, che chi riceve un aiuto deve mettercela tutta per non scaricare tutto il lavoro sull'aiutante.
Mentre chi aiuta deve mantenere una certa umiltà e non deve fare lo sbruffone.
Quando tra aiutante e aiutato c'è questo rapporto un forum funziona perfettamente.

Detto questo non voglio dare nessuna colpa a chi ha aperto questo topic, ne penso di essere stato un sbruffone, la mia intenzione è quella di impostare un discorso valido in generale.

Discussione: Javascript cambio immagini

Strumenti discussione

Ricerca discussione

Visualizza

Javascript cambio immagini!HELP!

Permessi di invio