|
|
|
|
Strumenti |
19-05-2020, 15:03 | #1 |
Junior Member
Iscritto dal: Nov 2009
Messaggi: 16
|
Slider foto random
Ciao, ho fatto questo codice con un'array per creare uno slider di foto e funziona.
Codice HTML:
<div style='text-align:center;'><img id='img' src='primaimmagine'/></div> <script language='Javascript' type='text/javascript'> var secondi=1; var num=0; function CambiaImmagine() { var immagini=new Array(); immagini[0]=1.jpg; immagini[1]=2.jpg; immagini[2]=3.jpg; immagini[3]=4.jpg; immagini[4]=5.jpg; immagini[5]=6.jpg; document.getElementById("img").src=immagini[num]; num=(num+1>=immagini.length)?0:num+1; setTimeout("CambiaImmagine()",secondi*8000); } CambiaImmagine(); </script> Adesso vorrei inserire la funzione random, ma non ci sono riuscito. Sapete come fare? Grazie |
19-05-2020, 16:37 | #2 |
Senior Member
Iscritto dal: Apr 2001
Città: Milano
Messaggi: 3594
|
dato che di html e javascript non mi ricordo più un tubo, prova con
Codice:
num=Math.floor(Math.random() * 5); |
19-05-2020, 17:54 | #3 | |
Junior Member
Iscritto dal: Nov 2009
Messaggi: 16
|
Quote:
Codice HTML:
num=(num+1>=immagini.length)?0:num+1; |
|
19-05-2020, 19:04 | #4 | |
Senior Member
Iscritto dal: Apr 2001
Città: Milano
Messaggi: 3594
|
Quote:
io farei così Codice:
<script language='Javascript' type='text/javascript'> function getRandom() { return Math.random() * 5; } var secondi=1; var num=0; function CambiaImmagine() { var immagini=new Array(); immagini[0]=1.jpg; immagini[1]=2.jpg; immagini[2]=3.jpg; immagini[3]=4.jpg; immagini[4]=5.jpg; immagini[5]=6.jpg; document.getElementById("img").src=immagini[num]; //num=(num+1>=immagini.length)?0:num+1; num=getRandom(); setTimeout("CambiaImmagine()",secondi*8000); } CambiaImmagine(); </script> |
|
19-05-2020, 19:19 | #5 | |
Junior Member
Iscritto dal: Nov 2009
Messaggi: 16
|
Quote:
|
|
19-05-2020, 20:35 | #6 |
Senior Member
Iscritto dal: Apr 2001
Città: Milano
Messaggi: 3594
|
mi hai fatto ripassare roba antica
Codice:
<script language='Javascript' type='text/javascript'> function getRandom() { return Math.random() * 5; } var secondi=1; var num=0; function CambiaImmagine() { var immagini=new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg"); num=Math.round(getRandom()); document.getElementById('img').src=immagini[num]; setTimeout("CambiaImmagine()",secondi*2000); } CambiaImmagine(); </script> <body onload="CambiaImmagine();"> <div style='text-align:center;'><img id='img' src='primaimmagine'/></div> |
19-05-2020, 20:59 | #7 |
Junior Member
Iscritto dal: Nov 2009
Messaggi: 16
|
il random funziona, ma come prima, si ripetono più volte le stesse foto prima che termina l'intera selezione
|
20-05-2020, 07:14 | #8 |
Senior Member
Iscritto dal: Apr 2005
Messaggi: 2988
|
Perchè il random non ti basta, poichè non hai poi l'esclusione di quella foto. (cioè può essere ripescata).
Prova così: Codice:
/* Randomize array in-place using Durstenfeld shuffle algorithm */ function shuffleArray(array) { for (var i = array.length - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)); var temp = array[i]; array[i] = array[j]; array[j] = temp; } } <script language='Javascript' type='text/javascript'> var secondi=1; var num=0; function CambiaImmagine() { //Aggiungo la funzione shuffle per var immagini= new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg"); shuffleArray(immagini); document.getElementById('img').src=immagini[num]; setTimeout("CambiaImmagine()",secondi*2000); } CambiaImmagine(); </script> <body onload="CambiaImmagine();"> <div style='text-align:center;'><img id='img' src='primaimmagine'/></div> |
20-05-2020, 09:50 | #9 |
Senior Member
Iscritto dal: Apr 2001
Città: Milano
Messaggi: 3594
|
a me sembra che le immagini vengano visualizzate tutte, a volte insistendo su alcune.
Poi vedi un po tu. Ho aggiunto anche 0.jpg visto che viene usato dalla funzione random. Codice:
<script language='Javascript' type='text/javascript'> function getRandom() { return Math.random() * 6; } var secondi=1; var num=0; function CambiaImmagine() { var immagini=new Array("0.jpg","1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg"); num=Math.round(getRandom()); document.getElementById('img').src=immagini[num]; document.getElementById('numero').innerHTML=num; setTimeout("CambiaImmagine()",secondi*2000); } CambiaImmagine(); </script> <body onload="CambiaImmagine();"> <div style='text-align:center;'> <img id='img' src='primaimmagine'/> <h1 id="numero">numero</h1> </div> |
20-05-2020, 10:00 | #10 | |
Junior Member
Iscritto dal: Nov 2009
Messaggi: 16
|
Quote:
Ho inserito il seguente codice Codice HTML:
/* Randomize array in-place using Durstenfeld shuffle algorithm */ function shuffleArray(array) { for (var i = array.length - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)); var temp = array[i]; array[i] = array[j]; array[j] = temp; } } |
|
20-05-2020, 13:25 | #11 |
Senior Member
Iscritto dal: Apr 2005
Messaggi: 2988
|
Mi sono riguardato il codice e perdonami, ma è pieno di errori (tra cui ad esempio il fatt oche set timeout richiama ricorsivamente la funzione e manda il tutto un po in pappa.)
Dovresti ragionare per rendere il codice più "leggibile" Comunque, ho riscritto con più logica il codice (usando immagini da google a caso) Codice:
<script type="text/javascript"> /* Randomize array in-place using Durstenfeld shuffle algorithm */ function shuffleArray(array) { for (var i = array.length - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)); var temp = array[i]; array[i] = array[j]; array[j] = temp; } } var immagini = new Array("https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/1200px-Example.svg.png", "https://image.shutterstock.com/image-vector/square-grunge-black-example-stamp-260nw-647778754.jpg", "https://media.istockphoto.com/vectors/example-blue-grunge-round-vintage-rubber-stamp-vector-id654913210", "quattro"); i=0; k = immagini.length; window.setInterval(function(){ document.getElementById("campo").src=immagini[i]; i++; }, 2000); </script> Qua il JSfiddle funzionante: https://jsfiddle.net/#&togetherjs=e4U2ME7955 A te studiare come far ripartire il ciclo. |
20-05-2020, 18:57 | #12 |
Junior Member
Iscritto dal: Nov 2009
Messaggi: 16
|
Ho provato il tuo nuovo codice ma non mi parte nemmemo più una foto.
Putroppo sono alle prime armi e non sono molto ferrato in materia |
21-05-2020, 07:52 | #13 |
Senior Member
Iscritto dal: Apr 2005
Messaggi: 2988
|
Guarda che ho modificato l'id con "campo".
Però scusa la domanda: lo scopo è studiare e imparare oppure ottenere soltanto uno slideshow? Perchè nel primo caso forse dovresti ripassare le basi, nel secondo forse vale la pena usare qualcosa di già pronto all'uso. |
21-05-2020, 20:56 | #14 | |
Junior Member
Iscritto dal: Nov 2009
Messaggi: 16
|
Quote:
|
|
Strumenti | |
|
|
Tutti gli orari sono GMT +1. Ora sono le: 02:43.