Slider foto random

El_Pocho · 19-05-2020, 16:03

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(&quot;img&quot;).src=immagini[num];
	num=(num+1&gt;=immagini.length)?0:num+1;
	setTimeout(&quot;CambiaImmagine()&quot;,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

Codice:

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

El_Pocho · 19-05-2020, 18:54

Quote:

Originariamente inviato da misterx

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

Codice:

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

l'ho sostituito a questa funzione

Codice HTML:

num=(num+1&gt;=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

Quote:

Originariamente inviato da El_Pocho

l'ho sostituito a questa funzione

Codice HTML:

num=(num+1&gt;=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ì

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(&quot;img&quot;).src=immagini[num];
	//num=(num+1&gt;=immagini.length)?0:num+1;
        num=getRandom();
	setTimeout(&quot;CambiaImmagine()&quot;,secondi*8000);
}	
CambiaImmagine();
</script>

El_Pocho · 19-05-2020, 20:19

Quote:

Originariamente inviato da misterx

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(&quot;img&quot;).src=immagini[num];
	//num=(num+1&gt;=immagini.length)?0:num+1;
        num=getRandom();
	setTimeout(&quot;CambiaImmagine()&quot;,secondi*8000);
}	
CambiaImmagine();
</script>

non mi funziona non escono pìù le foto

misterx · 19-05-2020, 21:35

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>

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

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>

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.

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>

El_Pocho · 20-05-2020, 11:00

Quote:

Originariamente inviato da Kaya

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>

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

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

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)

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.

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

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

Quote:

Originariamente inviato da Kaya

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

. Mi sto mettendo alla prova ma non riesco a realizzare quello che vorrei.... in tal caso utilezzerò la funzione ramdom normale.

19-05-2020, 17:37	#2
misterx Senior Member Iscritto dal: Apr 2001 Città: Milano Messaggi: 3741	dato che di html e javascript non mi ricordo più un tubo, prova con Codice: num=Math.floor(Math.random() * 5);

19-05-2020, 21:59	#7
El_Pocho 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, 19:57	#12
El_Pocho 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, 08:52	#13
Kaya Senior Member Iscritto dal: Apr 2005 Messaggi: 3279	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.

Strumenti
Mostra una versione stampabile Invia questa pagina per email