Question

我需要在几个div中随机更改每3000ms（带有fadeIn / fadeOut效果）背景图像

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

我该怎么做？

那是我的小提琴：

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

以下是关于如何做到这一点的基本想法。我会在一段时间后加入细节。

for(var k = platformCoords.length - 1; k > -1; k--)

以下是a demo，其中包含完整的代码。

Answer 2

你可以尝试这个例子：

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 3

首先，您应该使用setInterval函数来获取时间循环。之后，您应该在每次迭代时从数组中选择一个图像。可以通过使用随机密钥从images数组调用元素来完成。要获得随机数，您应该使用：Math.random()方法。请记住，它返回一个浮点数，而不是整数，所以你也应该进行转换。

这是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 4

以下是经过编辑的代码：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 5

基本上你需要做的是获得零和数组长度之间的随机数，并使用该索引从数组中选择图像，然后使用jquery css() 函数将其设置为div 。使用 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>

使用JS

5 个答案: