Cambiar imagen de fondo de un div cada cierto tiempo con jquery

Citar

Escrito el 11 Oct 2013 03:14 pm

Un cordial saludo, me gustaría saber como cambiar el background-image de fondo de un div cada cierto tiempo de forma automatica y con efecto fade, muchas gracias por su ayuda.

Por juliovanegas

Claber

161 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email Web

Publicista

@vanegas_julio

Citar

Escrito el 14 Oct 2013 02:35 am

Si recuerdo que lo hize para una "amiga"... te dejare el codigo

Código Javascript :

// Tiempo de cambio
var time = 3000;
// Imagenes en random
var lIMG = [ "tipografia_diseno.jpg", "branding_tipografia.jpg", "empaque_diseno.jpg" ];
// Funcion de random
function randomToN(maxVal) {
   var randVal = Math.random() * maxVal;
   return typeof 0 == 'undefined' ? Math.round(randVal) : randVal.toFixed(0);
}
// Timer
var timer = SetInterval(function(){
    // Seleciona una imagen de la lista
    var ram = lI[parseFloat( randomToN(lI.length) ) ];
    var img = ram == undefined || ram == null ? lI[0] : ram;
    // Direcion donde estan la imagenes
    var dir = "sitio/imagenes/fondo/" + img;
    // Cambia la imagen
    $("selector").css("backgroundImage", "url(" + dir + ")");
}, time);
// Boton para pararlo
$( 'botonStop' ).click(function(){
  clearInterval( timer );
  timer = null;
});

Seria genial que lo uses... y lo publiques en muchos lados!!

Por alejonext

Claber

235 de clabLevel

2 tutoriales

Genero:Masculino

Envíale un mensaje privado Web

artista

@alejonext

Citar

Escrito el 14 Oct 2013 03:28 am

Código HTML :

<!DOCTYPE html >
<html>
<head>
<meta charset="UTF-8" />
<title>Efecto fade con imagenes</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
    
var contenedor = $('#div');
var tiempo = 5000;
contenedor.css({'background-image':'url(http://hidefwalls.com/wp-content/g/hd-2/lion_hd_wallpaper.jpg)'}); 

function image(){
setTimeout(function() {
contenedor.fadeTo('slow', 0.3, function() {
$(this).css({'background-image':'url(http://hidefwalls.com/wp-content/g/hd-2/lion_hd_wallpaper.jpg)'}); 
otra_imagen();}).fadeTo('slow', 1); },tiempo); }

function otra_imagen(){
setTimeout(function() {
contenedor.fadeTo('slow', 0.3, function() {
$(this).css({'background-image':'url(http://www.fondosypantallas.com/wp-content/uploads/2010/02/HD_Wallpapers_Wide_Pack__21__30_.jpg)'}); 
otra_img();
}).fadeTo('slow', 1); },tiempo);
}

function otra_img(){
setTimeout(function() {
contenedor.fadeTo('slow', 0.3, function() {
$(this).css({'background-image':'url(http://newevolutiondesigns.com/images/freebies/nature-hd-background-25.jpg)'}); 
image();
}).fadeTo('slow', 1); },tiempo);
}

otra_imagen();

});
</script>
<style>
html,body,div{ margin:0; padding:0;} body,html{ height:100%;}
body { background:url(http://www.barcelo.edu.ar/images/loading_n.gif) no-repeat center center; }
#div{ height:100%; width:100%; display:block; background-repeat:no-repeat; background-size:cover;}
</style>
</head>

<body>

<div id="div"></div>

</body>
</html>

Por alejandroC

34 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 14 Oct 2013 03:32 am

copea y pega el código que te muestro, y observa el scritp en tu navegador

Por alejandroC

34 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 31 Oct 2014 10:19 am

Esta genial! Lo utilizaré en mi web!!!

Muchas gracias!!!

Por alscap

0 de clabLevel

Envíale un mensaje privado

Cambiar imagen de fondo de un div cada cierto tiempo con jquery

Escribe una respuesta rapida