Bildwechsel alle 30 Sekunden - Schleife

Ich würde gerne ein Bild ändern, nach 30 Sekunden...

Den code, den ich verwende sieht so aus:

Skript:

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

Und den Körper:

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

Ich jetzt noch nicht getestet, aber wenn meine Berechnungen korrekt sind, wird es funktionieren 🙂

Nun, was ich auch möchte ist, um ein "fading übergang" und ich möchte, dass das ändern der Bilder, um eine Schleife (es wird neu gestartet, nachdem alle Bilder gezeigt wurden). Haben Sie Jungs wissen, wie zu tun? Ich nicht 🙂

setTimeout ruft nur einmal; Sie suchen für setInterval. auch der code ausgeführt werden, sollte eine Funktion sein Hinweis, nicht einen string. so var timerid = setInterval(changeImage, 30000);
du hast absolut Recht!

InformationsquelleAutor Latze | 2010-07-16

  1. 12

    Ich bin einverstanden mit der Verwendung von frameworks für Dinge wie diese, nur weil es einfacher ist. Ich hackte diese bis ganz schnell, nur verblasst Sie ein Bild aus und schaltet dann auch funktionieren nicht in älteren IE-Versionen. Aber wie Sie sehen können Sie den code für die eigentliche fade ist viel länger als die JQuery-Implementierung geschrieben von 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);
    Danke, echt nice!
    Sie könnte verbessern Sie Ihre code und sparen Sie Platz, indem Sie ein paar einfache alternativen: x = (x + 1) % images.length; , val = val + (fade ? -1 : 1);, var images = ["image1.jpg", "image2.jpg", "image3.jpg"];.

    InformationsquelleAutor Loktar

  2. 7

    Sollten Sie einen Blick auf verschiedene javascript-Bibliotheken, die Sie sollten in der Lage sein, um Ihnen zu helfen:

    Alle von Ihnen haben tutorials und fade-in/fade-out ist eine einfache Nutzung.

    Z.B. in 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);

    InformationsquelleAutor KARASZI István

  3. 5

    Ich habe das jQuery-plugin in der Vergangenheit:

    CrossSlide

    Es hat Super funktioniert und tut genau das, was Sie wollen.

    Nice one, diese! War nicht auf der Suche für die Effekte, aber jetzt habe ich beschlossen, ich könnte genauso gut tun, der Kern Burns-Effekt! Zum Teil, weil es nur eine kleine Datei und Verwendung von jquery bereits für andere Skripte. Danke!
    Ich nicht succed zu verstehen, die "von" und "bis" - Attribut..Hilfe bitte?
    Die von/bis-Eigenschaften Steuern die start-und Endposition der animation (ähnlich CSS background-position). So from: 'top left' und to: 'bottom right' bedeutet das Bild wird in der oberen linken und in der Pfanne auf der unteren rechten. Es gibt auch eine zoom-Faktor (z.B. 1.5x) kann am Ende dazu führen, dass der Bild-zoom in/out während der pan: github.com/tobia/CrossSlide/blob/master/HOWTO.md

    InformationsquelleAutor Pat

  4. 1

    Haben Sie einen Blick auf innerfade. Hier ist ein Beispiel , wo ich es benutzt habe, genau das zu tun, was Sie wollen, denke ich.

    InformationsquelleAutor Skilldrick

  5. 0

    setInterval-Funktion verwendet werden muß.
    Hier ist ein Beispiel für das gleiche, ohne irgendwelche fancy fading-option. Einfaches Javascript, dass nicht ein Bild ändern alle 30 Sekunden. Ich habe angenommen, dass die Bilder, die gehalten wurden, in einem separaten Ordner "Bilder" und damit _images/am Anfang jedes Bildes. Sie können Ihren eigenen Weg, wie erforderlich, eingestellt werden.

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

    InformationsquelleAutor Arvind Naladiga Venkat

  6. 0

    Einfach.Das Ist Leicht.

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

    Und in Body den folgenden Code Schreiben:-

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

    InformationsquelleAutor Ketan Patil

Schreibe einen Kommentar