Randomly swap out background images in multiple divs using JavaScript

Question

Randomly swap out background images in multiple divs using JavaScript

I want to create a script that changes the background image of several divs every 3000ms with a fadeIn/fadeOut effect.

I have 4 divs, each with their own background image
All images are sourced from one array

How can I achieve this?

Here is the link to my fiddle:

http://jsfiddle.net/vol4ikman/brrmkwp7/9/

var images = [
    "http://placehold.it/100x100",
    "http://lorempixel/100/100",
    "http://lorempixel/100/100",
    "http://lorempixel/100/100",
    "http://lorempixel/100/100",
    "http://lorempixel/100/100",
    "http://lorempixel/100/100",
    "http://lorempixel/100/100",
    "http://lorempixel/100/100"
];

.images_wrapper {
    width:600px;
    position:relative;
    margin: 0 auto;
    min-height:300px;
    background:silver;
    padding:20px;
}
.images_wrapper > div {
    width:100px;
    height:100px;
    overflow:hidden;
    position:relative;
    margin:10px;
    background-color:#FFF;
    border:1px solid #000;
    border-radius:50%;
}

<div class="images_wrapper">
    <div class="image-holder image-1"></div>
    <div class="image-holder image-2"></div>
    <div class="image-holder image-3"></div>
    <div class="image-holder image-4"></div>
</div>

javascript jquery html css slideshow

Answer 1

Answer №1

If you're looking to achieve this task, here's a simple idea to get you started. I'll provide more details when I have the time.

var images = [
    "http://dummyimage.com/100x100/100/fff",
    "http://dummyimage.com/100x100/304/fff",
    "http://dummyimage.com/100x100/508/fff",
    "http://dummyimage.com/100x100/70B/fff",
    "http://dummyimage.com/100x100/90F/fff",
    "http://dummyimage.com/100x100/AA0/fff",
    "http://dummyimage.com/100x100/CB0/fff",
    "http://dummyimage.com/100x100/EC0/fff"
];
//A function designed to shuffle the images
function shuffle(o) {
    for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
}
//Obtain a reference to the divs
var $divs = $(".images_wrapper > div");
//An immediately invoked function expression
(function randomBackground() {

    //Create an array of random images from the 'images' array that is equal to the length of $divs
    var randomImages = shuffle(images).slice(0, $divs.length);
    //Loop through each div
    var done;
    $divs.animate({
        opacity: .2
    },{
        start: function() {
            done = 0;
        },
        progress: function(p, n1, n2) {
            console.log(n1)
            if (!done && n1 > .7) {
                $divs.each(function(idx) {
                    //Set the background
                    $(this).css({
                        'background-image': 'url(' + randomImages[idx] + ')'
                    });
                });
                done = 1;
            }
        },
        complete: function() {
            $divs.animate({
                opacity: 1
            }, 400, function() {
            });
        }
    });
    //Call the function again after 3 seconds
    setTimeout(randomBackground, 3000);
}());

Feel free to check out this demo with the entire code provided.

Answer 2

If you're looking to achieve this task, here's a simple idea to get you started. I'll provide more details when I have the time.

var images = [
    "http://dummyimage.com/100x100/100/fff",
    "http://dummyimage.com/100x100/304/fff",
    "http://dummyimage.com/100x100/508/fff",
    "http://dummyimage.com/100x100/70B/fff",
    "http://dummyimage.com/100x100/90F/fff",
    "http://dummyimage.com/100x100/AA0/fff",
    "http://dummyimage.com/100x100/CB0/fff",
    "http://dummyimage.com/100x100/EC0/fff"
];
//A function designed to shuffle the images
function shuffle(o) {
    for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
}
//Obtain a reference to the divs
var $divs = $(".images_wrapper > div");
//An immediately invoked function expression
(function randomBackground() {

    //Create an array of random images from the 'images' array that is equal to the length of $divs
    var randomImages = shuffle(images).slice(0, $divs.length);
    //Loop through each div
    var done;
    $divs.animate({
        opacity: .2
    },{
        start: function() {
            done = 0;
        },
        progress: function(p, n1, n2) {
            console.log(n1)
            if (!done && n1 > .7) {
                $divs.each(function(idx) {
                    //Set the background
                    $(this).css({
                        'background-image': 'url(' + randomImages[idx] + ')'
                    });
                });
                done = 1;
            }
        },
        complete: function() {
            $divs.animate({
                opacity: 1
            }, 400, function() {
            });
        }
    });
    //Call the function again after 3 seconds
    setTimeout(randomBackground, 3000);
}());

Feel free to check out this demo with the entire code provided.

Answer 3

Answer №2

Here's an example you can test out:

var images = ['http://www.placekitten.com/250/300','http://www.placekitten.com/260/300','http://www.placekitten.com/260/310'];
    var i = 0;
    var allDivs = [];
function changeBackground() {
    allDivs = $(".hexagon-in2").each(function(){       
        setBG($(this),1000);
    });      
}

function setBG(div, time){
    var timeVar;
    clearTimeout(timeVar);

    if( div == undefined){
        return;   
    }
    div.css('background-image', function() {
        if (i >= images.length) {
            i=0;
        }
        return 'url(' + images[i++] + ')';      
   });

    timeVar = setTimeout(setTimer, time);    
}


function getRandomInt (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function setTimer(){
    var imageIndex = getRandomInt(0,allDivs.length);
    setBG($(allDivs[imageIndex]),3000);  
}

$(function(){          
    changeBackground();        
});

Check out the DEMO here

Answer 4

Here's an example you can test out:

var images = ['http://www.placekitten.com/250/300','http://www.placekitten.com/260/300','http://www.placekitten.com/260/310'];
    var i = 0;
    var allDivs = [];
function changeBackground() {
    allDivs = $(".hexagon-in2").each(function(){       
        setBG($(this),1000);
    });      
}

function setBG(div, time){
    var timeVar;
    clearTimeout(timeVar);

    if( div == undefined){
        return;   
    }
    div.css('background-image', function() {
        if (i >= images.length) {
            i=0;
        }
        return 'url(' + images[i++] + ')';      
   });

    timeVar = setTimeout(setTimer, time);    
}


function getRandomInt (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function setTimer(){
    var imageIndex = getRandomInt(0,allDivs.length);
    setBG($(allDivs[imageIndex]),3000);  
}

$(function(){          
    changeBackground();        
});

Check out the DEMO here

Answer 5

Answer №3

To start, utilize the setInterval method to create a time loop for your task. Next, you'll need to pick an image from the array during each iteration by selecting an element using a random key from the images array. Generating a random number can be achieved through the use of the Math.random() method. Remember that this method returns a float, so you will need to convert it into an integer.

For the updated code, check out this revised fiddle.

 var images = [
    "http://placehold.it/100x100",
    "http://lorempixel/100/100",
    "http://lorempixel/100/100",
    "http://lorempixel/100/100",
    "http://lorempixel/100/100",
    "http://lorempixel/100/100",
    "http://lorempixel/100/100",
    "http://lorempixel/100/100",
    "http://lorempixel/100/100"
];

var setInerval = setInterval(function() {
    $.each($(".image-holder"), function(key, element) {             
        $(element).css(
            'background', 
            'url(' + images[Math.random(0, iamges.length)] + ')' 
        );
    });
}, 3000);

function getRandomInt(min, max)
{
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

Answer 6

To start, utilize the setInterval method to create a time loop for your task. Next, you'll need to pick an image from the array during each iteration by selecting an element using a random key from the images array. Generating a random number can be achieved through the use of the Math.random() method. Remember that this method returns a float, so you will need to convert it into an integer.

For the updated code, check out this revised fiddle.

 var images = [
    "http://placehold.it/100x100",
    "http://lorempixel/100/100",
    "http://lorempixel/100/100",
    "http://lorempixel/100/100",
    "http://lorempixel/100/100",
    "http://lorempixel/100/100",
    "http://lorempixel/100/100",
    "http://lorempixel/100/100",
    "http://lorempixel/100/100"
];

var setInerval = setInterval(function() {
    $.each($(".image-holder"), function(key, element) {             
        $(element).css(
            'background', 
            'url(' + images[Math.random(0, iamges.length)] + ')' 
        );
    });
}, 3000);

function getRandomInt(min, max)
{
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

Answer 7

Answer №4

Check out the updated code snippet that is now functional: http://jsfiddle.net/brrmkwp7/17/

var images = [
"https://www.video2brain.com/en/images_dynam/product_class_external_product/jquery.png",
"http://apigee.com/docs/sites/docs/files/icon_policy_javaScript.jpg"
];

var divs = ["image-1", "image-2", "image-3", "image-4"];



function setImages() {

    var image;

    for (var index = 0; index < divs.length; index++) {
        image = 'url(' + images[Math.floor(Math.random()*images.length)]  + ')';
        $("#" + divs[index]).css("background-image", image);
    }
}

setImages();
var interval = setInterval(setImages, 3000);

Answer 8

Check out the updated code snippet that is now functional: http://jsfiddle.net/brrmkwp7/17/

var images = [
"https://www.video2brain.com/en/images_dynam/product_class_external_product/jquery.png",
"http://apigee.com/docs/sites/docs/files/icon_policy_javaScript.jpg"
];

var divs = ["image-1", "image-2", "image-3", "image-4"];



function setImages() {

    var image;

    for (var index = 0; index < divs.length; index++) {
        image = 'url(' + images[Math.floor(Math.random()*images.length)]  + ')';
        $("#" + divs[index]).css("background-image", image);
    }
}

setImages();
var interval = setInterval(setImages, 3000);

Answer 9

Answer №5

To implement this functionality, you can generate a random number within the range of zero to the length of an array. This random number will be used as an index to select an image from the array. The selected image can then be applied to a div using jQuery's css() function. By using the each() method, you can iterate through each div element and apply the random images. To continuously update the images, you can create a function for this process and utilize the setInterval() function.

var images = [
    "http://example.com/image1.jpg",
    "http://example.com/image2.jpg",
    "http://example.com/image3.jpg",
    "http://example.com/image4.jpg",
    "http://example.com/image5.jpg"];
min = 0;
max = images.length - 1;
$(document).ready(function () {
    randomImages();
setInterval(randomImages, 3000);
});
randomImages = function () {
    $('.image-holder').each(function () {
        var number = getRandomArbitrary(min, max);
        $(this).css('background-image', 'url(' + images[number] + ')')
    })
}

getRandomArbitrary = function (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

.images_wrapper {
    width:600px;
    position:relative;
    margin: 0 auto;
    min-height:300px;
    background:silver;
    padding:20px;
}
.images_wrapper > div {
    width:100px;
    height:100px;
    overflow:hidden;
    position:relative;
    margin:10px;
    background-color:#FFF;
    border:1px solid #000;
    border-radius:50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="images_wrapper">
    <div class="image-holder image-1"></div>
    <div class="image-holder image-2"></div>
    <div class="image-holder image-3"></div>
    <div class="image-holder image-4"></div>
</div>

Answer 10

To implement this functionality, you can generate a random number within the range of zero to the length of an array. This random number will be used as an index to select an image from the array. The selected image can then be applied to a div using jQuery's css() function. By using the each() method, you can iterate through each div element and apply the random images. To continuously update the images, you can create a function for this process and utilize the setInterval() function.

var images = [
    "http://example.com/image1.jpg",
    "http://example.com/image2.jpg",
    "http://example.com/image3.jpg",
    "http://example.com/image4.jpg",
    "http://example.com/image5.jpg"];
min = 0;
max = images.length - 1;
$(document).ready(function () {
    randomImages();
setInterval(randomImages, 3000);
});
randomImages = function () {
    $('.image-holder').each(function () {
        var number = getRandomArbitrary(min, max);
        $(this).css('background-image', 'url(' + images[number] + ')')
    })
}

getRandomArbitrary = function (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

.images_wrapper {
    width:600px;
    position:relative;
    margin: 0 auto;
    min-height:300px;
    background:silver;
    padding:20px;
}
.images_wrapper > div {
    width:100px;
    height:100px;
    overflow:hidden;
    position:relative;
    margin:10px;
    background-color:#FFF;
    border:1px solid #000;
    border-radius:50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="images_wrapper">
    <div class="image-holder image-1"></div>
    <div class="image-holder image-2"></div>
    <div class="image-holder image-3"></div>
    <div class="image-holder image-4"></div>
</div>

Randomly swap out background images in multiple divs using JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Error encountered: TypeScript type error in my server-side action in Next.js

Material UI is failing to apply its styles

How can I display a button (hyperlink) on a new line using CSS or jQuery?

The React Query devtools are failing to display

A MySQL statement for inserting data that will only execute if both specified fields do not already exist

Menu selection popper JavaScript

The issue of CSS stylesheet not being updated in Firefox browser on VirtualBox Ubuntu Guest with DJango and Apache configuration

Issue with function execution in MVC after invoking from jstree

No data found on Angular TypeScript page with an empty array

Tips for utilizing ng-repeat with standard JSON data structures

Encountering difficulties in transferring bulky files with the request module in Node.js

Using an if else statement in JavaScript to show varying content depending on the browser

Guide on retrieving JavaScript variables in a JSON response and showcasing their values on a web page

Ways to position one div below another div

How can the <dfn> tag be effectively utilized?

What is the best way to use regular expressions in JavaScript to pull out a date value from a string?

AngularJS modal popup with a selectable table

html2canvas encountered a CORS error when trying to retrieve images from an external domain

Creating a glassy appearance: What's the process?

NodeJs / Express did not recognize the requested route