使用JS在多个div中随机更改背景图像

Question

我需要每 3000 毫秒（具有 fadeIn/fadeOut 效果）背景图像随机更改 divs

我有4个div，每个div都有背景图
所有图片均来自一个数组

我该怎么做？

那是我的 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>

Answer 1

你可以试试这个例子：

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

DEMO

Answer 2

首先，你应该使用setInterval function to obtain a time loop. Afterwards you should select an image from the array on its every iteration. It can be done by calling an element from images array with a random key. To get a random number you should use: Math.random()方法。请记住，它 returns 是一个浮点数，而不是整数，因此您也应该进行转换。

这里是updated 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 3

这是经过编辑的有效代码：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);

Answer 4

基本上你需要做的是获取一个介于零和数组长度之间的随机数，并将该索引用于数组中的 select 图像，然后使用 [=26= 将其设置为 div ] css() function. Use each() to iterate between the divs. Make it a function and call it repeatedly using 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>

Answer 5

这里是关于如何做到这一点的基本思路。有时间我会补上的。

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

这里是a demo完整的代码。

使用JS在多个div中随机更改背景图像

Change background image randomly in several divs with JS

html

javascript

css

jquery

slideshow