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

vriendelijke groet,
F

Davier doe

20-05-2018 14:10 gewijzigd op 20-05-2018 14:11

@FDance

Je kunt het ook proberen met de functie van Frank of anders simpel:


var afbeeldingenArray = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg'];
var padnaarjemap = "images/";
var imgNumbers = [];

for (var i = 0; i < 3; i++) {
  do {
    var willekeurig = Math.floor(Math.random() * afbeeldingenArray.length);
  } while (controle());
    var afbeelding = new Image();
    afbeelding.src = padnaarjemap + afbeeldingenArray[willekeurig];
	document.body.appendChild(afbeelding);
	
	imgNumbers.push(willekeurig);
}

function controle() {
  for (var i = 0; i < imgNumbers.length; i++) {
    if (imgNumbers[i] === willekeurig) {
      return true;
    }
  }
  return false;
}

Nu is het aan jou om mouseover te schrijven.

Thomas van den Heuvel

20-05-2018 15:16

for (var i = 0; i < imgNumbers.length; i++) {
    if (imgNumbers[i] === willekeurig) {
        return true;
    }
}
return false;

Mogelijk te verkorten tot:

return imgNumbers.indexOf(willekeurig) > -1;

De vraag is dan zelfs of je hier een aparte functie voor zou moeten gebruiken (het past per slot van rekening op één regel), je zou dat ook rechtstreeks in de while() kunnen opnemen (zonder de return uiteraard).

FDance Hero

20-05-2018 16:31

Dank jullie wel, dit werkt super!


var afbeeldingenArray = ['01.png', '02.png', '03.png', '04.png', '05.png', '06.png', '07.png', '08.png', '09.png', '10.png'];
var root = "http://web-stars.nl/character";
var imgNumbers = [];

for (var i = 0; i < 3; i++) {
  do {
    var random = Math.floor(Math.random() * afbeeldingenArray.length);
  } while (imgNumbers.indexOf(random) > -1);
	var image = document.createElement("IMG");
    image.setAttribute("src", root + afbeeldingenArray[random]);
	image.setAttribute("width", "20%");
	image.setAttribute("height", "auto");
    document.getElementById("loadimages").appendChild(image);
	
    imgNumbers.push(random);
}

Adoptive Solution

20-05-2018 17:38

Ja kan de afbeeldingen array ook vooraf laden. Kan je afbeeldingen toevoegen, wijzigen en weghalen :

var afbeeldingenArray = [
<?php
$path = "images/";
$files = scandir($path);
$extensions = array("jpg", "jpeg", "png", "gif");
foreach ( $files as $image ) {
	$imageFileType = strtolower( pathinfo( $image, PATHINFO_EXTENSION ) );
	if( in_array( $imageFileType , $extensions ) ) {
		echo "'" . $image . "',";
	}
}
?>
];

Reageren

Inloggen om te reageren