Slider foto random [Archivio] - Hardware Upgrade Forum

El_Pocho

19-05-2020, 16:03

Ciao, ho fatto questo codice con un'array per creare uno slider di foto e funziona.

<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

misterx

19-05-2020, 17:37

dato che di html e javascript non mi ricordo più un tubo, prova con

num=Math.floor(Math.random() * 5);

El_Pocho

19-05-2020, 18:54

dato che di html e javascript non mi ricordo più un tubo, prova con

num=Math.floor(Math.random() * 5);

l'ho sostituito a questa funzione

num=(num+1>=immagini.length)?0:num+1;

però mi parte sempre con la stessa foto e si ripetono spesso anche più volta senza terminare l'intera selezione

misterx

19-05-2020, 20:04

l'ho sostituito a questa funzione

num=(num+1>=immagini.length)?0:num+1;

però mi parte sempre con la stessa foto e si ripetono spesso anche più volta senza terminare l'intera selezione

io farei così

<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>

El_Pocho

19-05-2020, 20:19

io farei così

<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>

non mi funziona non escono pìù le foto :doh:

misterx

19-05-2020, 21:35

mi hai fatto ripassare roba antica :)

<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>

El_Pocho

19-05-2020, 21:59

il random funziona, ma come prima, si ripetono più volte le stesse foto prima che termina l'intera selezione

Kaya

20-05-2020, 08:14

Perchè il random non ti basta, poichè non hai poi l'esclusione di quella foto. (cioè può essere ripescata).

Prova così:

/* 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>

misterx

20-05-2020, 10:50

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.

<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>

El_Pocho

20-05-2020, 11:00

Perchè il random non ti basta, poichè non hai poi l'esclusione di quella foto. (cioè può essere ripescata).

Prova così:

/* 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>

Ho inserito il seguente 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;
}
}

in sostituzione di "//Aggiungo la funzione shuffle per" e nemmevo va:cry:

Kaya

20-05-2020, 14:25

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)

<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.

El_Pocho

20-05-2020, 19:57

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 :cry:

Kaya

21-05-2020, 08:52

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.

El_Pocho

21-05-2020, 21:56

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.
Sono alle prime armi e pieno di lacune :mc: . Mi sto mettendo alla prova ma non riesco a realizzare quello che vorrei.... in tal caso utilezzerò la funzione ramdom normale.