Меняйте фоновое изображение случайным образом в нескольких div с помощью JS

Вот основная идея о том, как вы можете это сделать. Я добавлю подробности, когда у меня будет время.

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 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;
}
//Get a reference to the divs
var $divs = $(".images_wrapper > div");
//A self executing function
(function randomBackground() {

    //Make an array of length = $divs.length, which is nothing but $divs.length random images form the images array;
    var randomImages = shuffle(images).slice(0, $divs.length);
    //Cycle thru the divs
    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() {
            });
        }
    });
    //Repeat the function
    setTimeout(randomBackground, 3000);
}());

Вот демонстрация с полным кодом.

вы можете попробовать этот пример:

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();        
});

ДЕМО

Прежде всего, вы должны использовать функцию setInterval для получения временная петля. После этого вы должны выбирать изображение из массива на каждой его итерации. Это можно сделать, вызвав элемент массива images со случайным ключом. Чтобы получить случайное число, вы должны использовать: Math.random()< /а> метод. Имейте в виду, что он возвращает число с плавающей запятой, а не целое, поэтому вам также следует выполнить преобразование.

Вот обновленная скрипта.

 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;
}

Вот отредактированный код, который работает: 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 setInerval = setInterval(setImages, 3000);

По сути, вам нужно получить случайное число между нулем и длиной массива и использовать этот индекс для выбора изображения из массива, а затем установить его в div с помощью jquery css(). Используйте each() для перебора элементов div. Сделайте это функцией и многократно вызывайте ее с помощью setInterval() функция.

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"];
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>