CODEWITHSUNDEEP
javascriptjquerycss
Steve Kess
Steve Kess

Reputation: 51

Do not repeat the last used image

How can I make the next image that appears not repeat the last one that was used?

var imgs = new Array("https://store.vtxfactory.org/wp-content/uploads/2018/header/1.jpg","https://store.vtxfactory.org/wp-content/uploads/2018/header/2.jpg","https://store.vtxfactory.org/wp-content/uploads/2018/header/3.jpg","https://store.vtxfactory.org/wp-content/uploads/2018/header/4.jpg","https://store.vtxfactory.org/wp-content/uploads/2018/header/5.jpg","https://store.vtxfactory.org/wp-content/uploads/2018/header/6.jpg");

function changeBg() {
        var imgUrl = imgs[Math.floor(Math.random()*imgs.length)];
        $('#masthead').css('background-image', 'url(' + imgUrl + ')');
};

setInterval(changeBg,10000);

Upvotes: 1

Views: 50

Answers (3)

gavgrif
gavgrif

Reputation: 15509

Rather than selecting a random item from the array and checking if it has occurred, I suggest that you shuffle the array (to get a random selection) and then shift the first item off it. This will allow both a random and a unique selection of items and remove the current item from the available array. To allow the original array to be replenished, each item is pushed into a usedImages array and then the used images retruned to the original array when it is empty.

Note that this will prevent the same item being replicated but it will also mutate the original array (although it replenishes it upon emptying the array).

Since I don't have access to the images for the background - I am console.logging the url to demonstrate it is always unique and that the array is replenished. I have also shortened the interval to 3 seconds for demonstration purposes.

var imgs = ["https://store.vtxfactory.org/wp-content/uploads/2018/header/1.jpg","https://store.vtxfactory.org/wp-content/uploads/2018/header/2.jpg","https://store.vtxfactory.org/wp-content/uploads/2018/header/3.jpg","https://store.vtxfactory.org/wp-content/uploads/2018/header/4.jpg","https://store.vtxfactory.org/wp-content/uploads/2018/header/5.jpg","https://store.vtxfactory.org/wp-content/uploads/2018/header/6.jpg"];

var usedImages = [];
changeBg();

function changeBg() {
  shuffle(imgs);
  var imgUrl = imgs.shift();
  console.log(imgUrl);
  $('#masthead').css('background-image', 'url(' + imgUrl + ')');
  
  usedImages.push(imgUrl)
  if(imgs.length== 0 ) {
    imgs= usedImages;
    usedImages=[]
    };  
  
};


function shuffle(array) {
	var currentIndex = array.length, temporaryValue, randomIndex;
	while (0 !== currentIndex) {
		randomIndex = Math.floor(Math.random() * currentIndex);
		currentIndex -= 1;
		temporaryValue = array[currentIndex];
		array[currentIndex] = array[randomIndex];
		array[randomIndex] = temporaryValue;
	}
	return array;
}


setInterval(changeBg, 3000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 1

Devan Buggay
Devan Buggay

Reputation: 2759

You can store the last one that was used and generate new ones until what you want holds true.

var imgs = new Array("https://store.vtxfactory.org/wp-content/uploads/2018/header/1.jpg","https://store.vtxfactory.org/wp-content/uploads/2018/header/2.jpg","https://store.vtxfactory.org/wp-content/uploads/2018/header/3.jpg","https://store.vtxfactory.org/wp-content/uploads/2018/header/4.jpg","https://store.vtxfactory.org/wp-content/uploads/2018/header/5.jpg","https://store.vtxfactory.org/wp-content/uploads/2018/header/6.jpg");

var imgUrl = imgs[Math.floor(Math.random()*imgs.length)];
var lastUsed = "";

function changeBg() {
    while(imgUrl !== lastUsed) 
      imgUrl = imgs[Math.floor(Math.random()*imgs.length)];
    $('#masthead').css('background-image', 'url(' + imgUrl + ')');
    lastUsed = imgUrl;
};

setInterval(changeBg,10000);

Upvotes: 1

AlliterativeAlice
AlliterativeAlice

Reputation: 12577

Store the last used index and regenerate the random number if it matches it:

var lastIndex = -1;
function changeBg() {
    var index;
    do {
        index = Math.floor(Math.random()*imgs.length);
    } while (index == lastIndex);
    var imgUrl = imgs[index];
    lastIndex = index;
    $('#masthead').css('background-image', 'url(' + imgUrl + ')');
};

Upvotes: 1

Related Questions