cambio de imagen cada 30 segundos -

Question

bucle

Me gustaría hacer un cambio de imagen después de 30 segundos ...

El código que estoy usando el siguiente aspecto:

Guión:

var images = new Array() 
images[0] = "image1.jpg"; 
images[1] = "image2.jpg"; 
images[2] = "image3.jpg"; 
setTimeout("changeImage()", 30000); 
var x=0; 

function changeImage() 
{ 
document.getElementById("img").src=images[x] 
x++; 
} 

Y el cuerpo:

<img id="img" src="startpicture.jpg"> 

Ahora no he probado esto todavía, pero si mis cálculos son correctos va a trabajar :)

Ahora, lo que también quiero es hacer una "transición de desvanecimiento" y me gustaría que el cambio de imágenes se repita (se reinicia después de que se hayan mostrado todas las imágenes). ¿Alguno de ustedes sabe cómo hacer eso? No :)

Answer 1

Estoy de acuerdo con el uso de marcos para cosas como esta, simplemente porque es más fácil. Lo pirateé muy rápido, simplemente desvaneció una imagen y luego cambia, tampoco funcionará en versiones anteriores de IE. Pero como puede ver, el código para el desvanecimiento real es mucho más largo que la implementación de JQuery publicada por KARASZI István.

function changeImage() 
{ 
    var img = document.getElementById("img"); 
    img.src = images[x]; 
    x++; 

    if(x >= images.length){ 
     x = 0; 
    } 

    fadeImg(img, 100, true); 
    setTimeout("changeImage()", 30000); 
} 

function fadeImg(el, val, fade){ 
    if(fade === true){ 
     val--; 
    }else{ 
     val ++; 
    } 

    if(val > 0 && val < 100){ 
     el.style.opacity = val/100; 
     setTimeout(function(){fadeImg(el, val, fade);}, 10); 
    } 
} 

var images = [], 
x = 0; 

images[0] = "image1.jpg"; 
images[1] = "image2.jpg"; 
images[2] = "image3.jpg"; 
setTimeout("changeImage()", 30000); 

Answer 2

He utilizado este plugin de jQuery en el pasado:

CrossSlide

funcionó muy bien y hace exactamente lo que quiere.

Answer 3

Eche un vistazo a innerfade. Here's an example donde lo usé para hacer exactamente lo que está buscando, creo.

Answer 4

Usted debe echar un vistazo a las diferentes bibliotecas de JavaScript, que debe ser capaz de ayudarle:

• mootools
• jQuery
• Dojo Toolkit
• prototype

Todos ellos tienen tutoriales, y fade in/fade out es ab uso asic.

Por ej. en jQuery:

var $img = $("img"), i = 0, speed = 200; 
window.setInterval(function() { 
    $img.fadeOut(speed, function() { 
    $img.attr("src", images[(++i % images.length)]); 
    $img.fadeIn(speed); 
    }); 
}, 30000); 

Answer 5

setInterval función es la que se debe utilizar. Aquí hay un ejemplo de lo mismo sin ninguna opción elegante de desvanecimiento. Javascript simple que hace un cambio de imagen cada 30 segundos. He supuesto que las imágenes se guardaron en una carpeta de imágenes separada y, por lo tanto, _images/está presente al comienzo de cada imagen. Puede tener su propia ruta, según sea necesario, para establecerse.

CÓDIGO:

var im = document.getElementById("img"); 

var images = ["_images/image1.jpg","_images/image2.jpg","_images/image3.jpg"]; 
var index=0; 

function changeImage() 
{ 
    im.setAttribute("src", images[index]); 
    index++; 
    if(index >= images.length) 
    { 
    index=0; 
    } 
} 

setInterval(changeImage, 30000); 

Answer 6

sólo tiene que utilizar That.Its fácil.

<script language="javascript" type="text/javascript"> 
    var images = new Array() 
    images[0] = "img1.jpg"; 
    images[1] = "img2.jpg"; 
    images[2] = "img3.jpg"; 
    setInterval("changeImage()", 30000); 
    var x=0; 

    function changeImage() 
    { 
       document.getElementById("img").src=images[x] 
       x++; 
       if (images.length == x) 
       { 
        x = 0; 
       } 
    } 
</script> 

Y en Cuerpo escribir este código: -

<img id="img" src="imgstart.jpg">