I've been attempting to change the background image on a website by rotating through an array of images, but unfortunately, I am encountering difficulties. Despite my efforts, the console doesn't provide any clues as to what might be going wrong. I have exhausted all my ideas and would greatly appreciate some assistance. The goal is to rotate the background images based on the array provided. It's unclear why it isn't working; could it be that the cover property of the background is causing issues? I have spent hours modifying the code, initially trying without populating the array with new Image() constructors, then making adjustments in hopes of resolving the issue. I referenced a solution from this website (link) for most of my code.
$(document).ready(function() {
fondos = new Array('/Foto_Pimend/activos/flickr_foto_fondo_1.jpg', '/Foto_Pimend/activos/flickr_foto_fondo_2.jpg', '/Foto_Pimend/activos/flickr_foto_fondo_3.jpg');
cargar_fondos = new Array();
fondo_num = 1;
var i;
for (i = 0; i < fondos.length; i++) {
cargar_fondos[i] = new Image();
cargar_fondos[i].src = fondos[i];
}
function rotarFondos() {
$('.fondo_intro').css({'background': 'url("' + cargar_fondos[fondo_num++ % cargar_fondos.length].src + '") no-repeat 50% 100% cover'}, 'slow');
}
intId = setTimeout(rotarFondos, 10000);
});
The div I wish to modify programmatically has the following style:
.fondo_intro {background: url(/Foto_Pimend/activos/flickr_foto_fondo_1.jpg) no-repeat; width:100%; background-size:cover; background-position:50% 100%;position:fixed; height:100%;}
I also attempted to link the function to a click event used to change content:
$('.link_manejador').click(function() {
var content = $(this).attr('name')+'_template';
llamada_contenido(content); rotarFondos();
});
Instead of a rotating background, I aimed to have a dynamic background that changes based on content. Unfortunately, this approach didn’t yield results either, and the console remains silent—no errors or hints. I can see the images being created and the counter incrementing, yet nothing transpires. Even when I try changing the background manually via the console:
$('.fondo_intro').css({'background-image':'url(/Foto_Pimend/activos/flickr_foto_fondo_2.jpg'},'slow')
No changes occur. There seems to be a fundamental misunderstanding on my part.