我的网站上同时显示几个div,每个div都有不同的背景图像。我创建了一个脚本,该脚本以随机的时间间隔更改背景图像,但是,该脚本同时更改了所有图像....我希望每个图像都可以随机更改,而完全独立于其他图像.... I也希望它们褪色,但是时间是这里的关键问题。
这是我正在使用的脚本。
jQuery(window).load(function(){
var images = ['images/gallery/gallery2thumb.jpg','images/gallery/gallery3thumb.jpg','images/gallery/gallery4thumb.jpg','images/gallery/gallery5thumb.jpg','images/gallery/gallery6thumb.jpg','images/gallery/gallery7thumb.jpg','images/gallery/gallery8thumb.jpg','images/gallery/gallery9thumb.jpg',];
var i = 0;
var timeoutVar;
function changeBackground() {
clearTimeout(timeoutVar); // just to be sure it will run only once at a time
jQuery('.hexagon-in2.change').css('background-image', function() {
if (i >= images.length) {
i=0;
}
return 'url(' + images[i++] + ')';
});
timeoutVar = setTimeout(changeBackground, ( 300+Math.floor(Math.random() * 1700) ));
}
changeBackground();
});
还可以看到我的JSFiddle
http://jsfiddle.net/QwJfn/2/
如何让每个div在随机的时间间隔但独立地更改背景图像?
最佳答案
检查一下:
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();
});
在这里工作的小提琴:http://jsfiddle.net/QwJfn/10/