Wie erstelle ich mit Javascript ein Daumenkino?

Ich möchte ein Daumenkino mit Javascript/HTML programmieren, indem ich setInterval() verwende.

Answer 1

[Minilexikon]

Ich würde dir eine Lösung mit jQuery empfehlen:

HTML:

<img src="" id="daumenkino" />

jQuery:

//Alle deine Bilder
var bilder = [];
bilder[0] = "http://placekitten.com/210/330";
bilder[1] = "http://placekitten.com/210/230";
bilder[2] = "http://placekitten.com/220/330";

//Ausgangsbild
$('#daumenkino').attr('src',bilder[0]);

//Daumenkino
for (var x = 0, ln = bilder.length; x < ln; x++) {
  setTimeout(function(y) {
    $('#daumenkino').attr('src',bilder[y]);
  }, x * 1000, x);
}

Zu deinem Array da oben kannst du nun alle deine Bilder hinzufügen, die ins Daumenkino sollen. Wenn du die Zeit anpassen willst, kannst du die 1000, die für 1000 Sekunden steht, ändern.

http://codepen.io/anon/pen/QyXBgB

Woher ich das weiß: Berufserfahrung – Seit 2014

Answer 2

[EyeBook888]

Lege dir alle Bilder in einen Ordner und nenne sie Bild1.png Bild2.png usw.

Erstelle in dem HTML Teil ein im Objekt.

In einer Function kannst du dann immer die src des Bildes verändern.

i=0; function next(){ document.getElementById('img_Id').src="./Bild" + i + ".png"; i++;}

Comments

[Minilexikon]

Soll man bei deiner Version klicken oder sollte das eigentlich eine Schleife sein?

Answer 3

[MonkeyKing]

Erstelle dir ein Bild, das alle Frames deinen Daumenkinos enthält, also z.B. untereinander (einen sogenannten Sprite). Angenommen du hast 100 Bilder, jeweils 50x50 Pixel groß, erhältst du ein 50x5000 Pixel großes Bild. Dadurch, dass du nur ein Bild verwendest werden alle frames auf einmal geladen. Nun brauchst du noch DIV, z.B.

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

Und CSS Direktiven

#kino {
    width: 50px;
    height: 50px;
    overflow: hidden;
    background-image: url('kino.png');
 }

Und dann setzt du per setInterval die Direktive background-position so, dass der nächste Frame angezeigt wird:

var y = 0;

// preloading image
var image = new Image();
image.onload = function(){  
    setInterval(function () {
        y += 50;
        if (y==500) y=0;
        document.getElementById('kino').style.backgroundPosition = y + 'px';
    }, 100);
};
image.src = 'kino.png';

Habe ich jetzt nicht getestet, müsste aber eigentlich gehen.

Woher ich das weiß: Berufserfahrung – 20 Jahre Berufserfahrung