changement d'image toutes les 30 secondes - boucle

Question

Je voudrais faire un changement d'image au bout de 30 secondes ...

Le code J'utilise ressemble à ceci:

Script:

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++; 
} 

Et le corps:

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

maintenant, je ne l'ai pas testé ce pas encore, mais si mes calculs sont exacts, cela fonctionnera :)

Maintenant, ce que je veux aussi, c'est de faire une "transition de fondu" et je voudrais changer les images en boucle (il redémarre après que toutes les images aient été montrées). Est-ce que l'un d'entre vous sait comment faire ça? Je ne suis pas :)

Answer 1

Je suis d'accord avec l'utilisation de cadres pour des choses comme ça, simplement parce que c'est plus facile. J'ai piraté cela très rapidement, fait disparaître une image et puis les commutateurs, ne fonctionnera pas dans les anciennes versions d'Internet Explorer. Mais comme vous pouvez voir le code pour le fondu réel est beaucoup plus long que l'implémentation JQuery posté par 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

Je l'ai utilisé ce plugin jQuery dans le passé:

CrossSlide

Il fonctionnait très bien et fait exactement ce que vous voulez.

Answer 3

Jetez un oeil à innerfade. Here's an example où je l'ai utilisé pour faire exactement ce que vous cherchez, je pense.

Answer 4

Vous devriez jeter un oeil à différentes bibliothèques javascript, ils devraient être en mesure de vous aider:

• mootools
• jQuery
• Dojo Toolkit
• prototype

Tous eux ont des tutoriels, et fondu dans/fondu est ab utilisation asique.

Par exemple. dans 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

La fonction setInterval est celle qui doit être utilisée. Voici un exemple pour le même sans aucune option d'évanouissement de fantaisie. Javascript simple qui fait une image change toutes les 30 secondes. J'ai supposé que les images étaient conservées dans un dossier d'images séparé et donc _images/est présent au début de chaque image. Vous pouvez avoir votre propre chemin au besoin.

CODE:

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

utiliser juste That.Its facile.

<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> 

Et dans le corps écrire ce code: -

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