CODEWITHSUNDEEP
javascript
Антон Портнянко
Антон Портнянко

Reputation: 373

How to repeat randomised img endlessly on javascript?

I have a function that render random image without repeating, but it stops working when the array of images has come to an end, my goal is to restart function with another random order of images, so function can work infinite. I've read another questions, but didn't find something appropriate to me case. Here is html part:

    <div class="card">
        <div class="front" onClick="pickimg();return false;"><img 
        src="1.jpg" alt=""></div>
        <div class="back"><img src="2.jpg" name="randimg"></div>
    </div>

Css (just in case):

.card {
 width: 200px;
 height: 300px;
 position: relative;
 perspective: 1000px;
 cursor: pointer;
 margin: 0 50px;
}

.front, .back {
 width: 100%;
 height: 100%;
 position: absolute;
 display: flex;
 justify-content: center;
 align-items: center;
 transition: 1s;
 backface-visibility: hidden;
 border-radius: 10px;
}

.front {
 transform: rotateY(360deg);
}

.back  {
 transform: rotateY(180deg);
}

And JS:

var cards = document.querySelectorAll('.card')

Array.from(cards).forEach(function(card) {
 card.addEventListener('click', function() {
Array.from(card.querySelectorAll('.back, .front')).forEach(function(el) {
  ['back', 'front'].forEach(function(s) {
    el.classList.toggle(s)
  });
  });
 });
 });

 var usedImages = {};
 var usedImagesCount = 0;

function pickimg(){
var imagenumber = 3;
var randomnumber = Math.random();
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1;
images = new Array();
images[0] = "";
images[1] = "3.jpg";
images[2] = "4.jpg";
images[3] = "2.jpg";
var image = images[rand1];
if (!usedImages[rand1]){
    document.randimg.src = images[rand1];
    usedImages[rand1] = true;
    usedImagesCount++;
    if (usedImagesCount === images.length){
        usedImagesCount = 0;
        usedImages = {};
    }
 } else {
    pickimg();
 }
 }

Thank you for your help.

Upvotes: 4

Views: 76

Answers (3)

Darshan
Darshan

Reputation: 691

Try this - 

int lastIndex = Math.round(Math.random()*(imagenumber - 1)) + 1;
function pickImg(){
        let imagenumber = 3;
        int currIndex = Math.round(Math.random()*(imagenumber - 1)) + 1;    
        images = new Array();
        images[0] = "2.jpg";
        images[1] = "3.jpg";
        images[2] = "4.jpg";
        if (lastIndex !== currIndex) {      
            document.randimg.src = images[currIndex];
            lastIndex = currIndex;
        }
        else {
            pickImg();
        }
}

If you didn't get any image displayed that means you have to deal with when images[index] returns undefined. Inshort you need to have index in images always equal to some value.

Upvotes: 1

Willem van der Veen
Willem van der Veen

Reputation: 36580

You could try something like this:

let img = [1,2,3,4,5];

function switchImage () {

  for(; ; ){
    let x = Math.random() * 10;
  
    if(typeof img[Math.round(x)] !== 'undefined') {
      img.splice(x, 1);
      break;
    }
    
  }

  console.log(img);
  
  if (img.length > 0){
      setTimeout(() =>  switchImage (),1000);
  }
  

}


switchImage();

This is a simplified example where every second the function calls itself again and a new image is picked from the image array. The old image is cut out of the array and the function will stop calling itself when every picture is shown.

Upvotes: 1

Munkhdelger Tumenbayar
Munkhdelger Tumenbayar

Reputation: 1874

How about simple like this does this work for you? at least it will not give you same number a row

var imgArr = [1, 2, 3, 4, 5, 6] // imagine this is your img
var lastImgIndex;

function loadImg() {
  var RandomIndex = Math.floor((Math.random() * imgArr.length) + 1);
  if (lastImgIndex != RandomIndex) {
    $('span').text(RandomIndex + ' index of img show');
    lastImgIndex = RandomIndex;
  } else {
    loadImg();
  }

}
loadImg();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span></span>

Upvotes: 0

Related Questions