web-dev-qa-db-fra.com

Changement d'image toutes les 30 secondes - boucle

Je voudrais faire changer une image après 30 secondes ...

Le code que j'utilise ressemble à ceci:

Scénario:

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 n'ai pas encore testé celui-ci, mais si mes calculs sont corrects, cela fonctionnera :)

Maintenant, ce que je veux aussi, c'est faire une "transition en fondu" et je voudrais que les images changent en boucle (cela redémarre une fois que toutes les images ont été affichées) Est-ce que certains d'entre vous savent comment faire cela? Je ne :)

javascripthtmlimageloops
6
Latze

Je suis d'accord avec l'utilisation de frameworks pour des choses comme celle-ci, simplement parce que c'est plus facile. J'ai piraté cela très rapidement, fait fondre une image puis change de commutateur, cela ne fonctionnera pas non plus dans les anciennes versions d'IE. Mais comme vous pouvez le constater, le code du fondu réel est beaucoup plus long que l'implémentation de JQuery publiée 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);
12
Loktar

Vous devriez jeter un oeil à différentes bibliothèques javascript, elles devraient pouvoir vous aider:

Tous ont des tutoriels, et le fade in/fade out est un usage de base.

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);
7
KARASZI István

J'ai déjà utilisé ce plugin jQuery:

CrossSlide

Cela a très bien fonctionné et fait exactement ce que vous voulez.

5
Pat

Regardez innerfade . Voici un exemple où je l'ai utilisé pour faire exactement ce que vous recherchez, je pense.

1
Skilldrick

la fonction setInterval est celle qui doit être utilisée. Voici un exemple pour le même sans aucune option de décoloration sophistiquée. Javascript simple qui change une image toutes les 30 secondes. J'ai supposé que les images étaient conservées dans un dossier d'images séparé et que, par conséquent, _images/est présent au début de chaque image. Vous pouvez avoir votre propre chemin si nécessaire pour être défini.

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);
0
Arvind Naladiga Venkat

Il suffit d'utiliser That.Its Easy.

<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, écrivez ce code: -

<img id="img" src="imgstart.jpg">
0
Ketan Patil