我需要在几个div中随机更改每3000ms（具有fadeIn / fadeOut效果）背景图像
我怎样才能做到这一点？
那是我的小提琴：
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>这是有关如何执行此操作的基本思路。有空的时候我会添加详细信息。
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);
}());
这是带有完整代码的演示。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句