display randomly selected images to class

Asked Sep 14 '18 at 02:50

Active Sep 14 '18 at 02:59

Viewed 41 times

I have a box2 with <img /> inside it.

I have used a random image selection function for selecting random images,

I want to display the randomly selected image one by one to the image src of class box2.

How do I achieve it?

I use

function rvalue() {

  var array = [];
  var tempimages = [];


  var ArrayOfImages = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg', '10.jpg', '11.jpg', '12.jpg', '13.jpg', '14.jpg', '15.jpg', '16.jpg', '17.jpg', '18.jpg', '19.jpg', '20.jpg'];

  arrayLength = ArrayOfImages.length;

  for (i = 0; i < arrayLength; i++) {
    array[i] = ArrayOfImages[Math.floor(Math.random() * arrayLength)];

  }

  console.log(tempimages);
}

.box {
  float: left;
  width: 50px;
  height: 50px;
  margin-left: 30%;
  padding-top: 2%;
  background-color: #ff9900 2px;
}

<body onload="rvalue">
  <div class="box" id="2">
    <img src="" draggable="true" id="slide" style="width:100px; height:100px; border-radius: 50%;" border="rounded" />
  </div>
</body>

edited Sep 14 '18 at 02:59

Ramesh

2,297
2
20
42

asked Sep 14 '18 at 02:50

geek

why not shuffle ArrayOfImages and display from 0 to end? – Chris Li Sep 14 '18 at 02:51
how ? im a newbie can you explain – geek Sep 14 '18 at 02:52
take a look at this question https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array – Chris Li Sep 14 '18 at 02:53
how to display in img src after shuffling from an array? – geek Sep 14 '18 at 02:55
change src of img, `document.querySelector("#slide").src = //new img path` should work – Chris Li Sep 14 '18 at 02:57
new img path should be what? – geek Sep 14 '18 at 03:04
the path of the image you want to display? – Chris Li Sep 14 '18 at 03:08
I don't know enough about your application to know if this is truly helpful, however, consider loading all your images into the page and possibly hiding and showing them randomly rather than loading as it will help with loading performance possibly. – Mayhem50 Sep 14 '18 at 03:22
can you provide a code snippet? – geek Sep 14 '18 at 03:26
on loading all images and hiding images and showing? – geek Sep 14 '18 at 03:28

display randomly selected images to class

0 Answers0