JS. 10 afb. in array moeten random gepakt worden waarvan 3 laten zien.
Door
FDance Hero
op 19-05-2018 19:56
gewijzigd op 19-05-2018 23:56
3.123 views
Hoi,
Ik gebruik pure javascript. geen jquery (oid) Ik heb 10 afbeeldingen, waarvan er 3 moeten worden laten zien. Die drie mogen niet hetzelfde zijn. Elke keer als de webpagina herladen wordt moeten de afbeeldingen weer anders zijn. Maar elke keer als de muis op een afbeelding gaat en er weer af moet er ook weer een nieuwe afbeelding laten zien worden.
Ik ben er al een tijdje mee bezig, ik kan niks op internet vinden wat me helpt en toen ben ik gaan zoeken naar een forum waar ik het kan vragen. Uiteindelijk heb ik nog niet echt code die iets oplevert. Ik gebruik 3 img tags als html.
Kan iemand me op weg helpen? Ik wil graag javascript leren. Ik vind het niet erg om te puzzelen, als ik maar een beginnetje heb.
[EDIT:]
<img class="firstImage" onmouseleave="changeImg()">
<img class="secondImage" onmouseleave="changeImg()">
<img class="thirdImage" onmouseleave="changeImg()">
<script>
var imagesArray = Array('root1', 'root2', 'root3', 'root4', 'root5', 'root6', 'root7', 'root8', 'toot9', 'root10);
function loadImg() {
// first three random images have to be shown.
}
function changeImg() {
// change img every onmouseleave event.
}
</script>
Ik krijg graag opbouwende feedback over mijn vraag,
Ja verkeerde account ingelogd. Was al een behoorlijke tijd niet hier op online geweest en dat waren al m'n oude posts met behoorlijk slechte inhoud haha, oops, daarom dus nieuwe account. Kan het bericht helaas niet verwijderen.
var imagesArray = Array('one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten');
var random = Math.floor(Math.random() * imagesArray.length)
console.log(random);
M'n vraag: Ik heb dus een array, ik heb een random nummer. Maar ik weet niet hoe ik nu na een mouseover een nieuwe/ander nummer krijg. Daar zou ik graag hulp bij willen.
<img class="firstImage" onmouseleave="changeImg()">
<img class="secondImage" onmouseleave="changeImg()">
<img class="thirdImage" onmouseleave="changeImg()">
<script>
var imagesArray = Array('root1', 'root2', 'root3', 'root4', 'root5', 'root6', 'root7', 'root8', 'toot9', 'root10);
function loadImg() {
// first three random images have to be shown.
}
function changeImg() {
// change img every onmouseleave event.
}
</script>
De random nummers zijn om dus een willekeurige root uit de array te kunnen krijgen
Het lijkt mij het handigste om de volgorde van de elementen in de array door elkaar te schudden. (zoals je een stapel speelkaarten schudt) Echter heeft javascript hier standaard geen functie voor beschikbaar in tegenstelling tot PHP's shuffle. Als de array vanuit PHP wordt overgenomen is het wellicht het makkelijkste om de array dan al in PHP door elkaar te schudden. Anders kun je deze javascript functie gebruiken.
Je houdt dan gewoon een array van tien kaarten maar de volgorde van de kaarten is telkens anders. Je begint daarna gewoon met de eerste drie kaarten te tonen (0,1 en 2) en bij een mouse over tel je door naar 3, 4, 5 enz. na 9 begin je weer bij 0.
En bij zowel de normale sortering waarbij je random elementen kiest of (en waarschijnlijk eenvoudiger) bij random sortering waarbij je het volgende element pakt zul je een aantal zaken moeten onthouden: ofwel (in het eerste geval) de reeds geselecteerde kaarten, zodat je die niet nog een keer random uitkiest, ofwel (in het tweede geval) het volgnummer van de laatst gekozen kaart, zodat je elke keer als je een nieuwe kaart toont dit getal ophoogt (modulo het aantal kaarten).
var afbeeldingenArray = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg'];
var padnaarjemap = "images/";
for (var i = 0; i < 3; i++) {
var willekeurig = afbeeldingenArray[Math.floor(Math.random() * afbeeldingenArray.length)];
var afbeelding = new Image();
afbeelding.src = padnaarjemap + willekeurig;
document.body.appendChild(afbeelding);
}
Het werkt inderdaad!
Om de nummers verschillend te maken moet ik volgens mij iets met do en while doen, ik weet alleen niet hoe ik er voor zorg dat het laatste getal wordt bewaard zodat het vergelijken kan worden met het nieuwe getal.
<div id="loadimages" onload="loadImages()"></div>
<script>
// Hover: afbeeldingen mogen niet achter elkaar voor komen.
// Onload: afbeeldingen mag niet al in de andere 2 afbeeldingen weergeven zijn.
function loadImages() {
var afbeeldingenArray = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg'];
var root = "images/";
for (var i = 0; i < 3; i++) {
do {
var currentImage = afbeeldingenArray[Math.floor(Math.random() * afbeeldingenArray.length)];
var afbeelding = new Image();
afbeelding.src = root + currentImage;
document.documentGetElementById("loadimages").appendChild(afbeelding);
console.log(currentImage);
// lastImage ?
} while (lastImage===currentImage)
}
}
</script>
Dit werkt nog niet (while (lastImage===currentImage) )
Ik ben geen kaartspel aan het maken :) het idee komt wel een beetje overeen. @thomas de 'regels' die je opnoemt gelden inderdaad voor m'n afbeeldingen.
