Frage von Mewstar117, 40

Wie erstelle ich mit Javascript ein Daumenkino?

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

Antwort
von Minilexikon, 18

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

Antwort
von MonkeyKing, 18

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.

Antwort
von EyeBook888, 21

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++;}
Kommentar von Minilexikon ,

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

Keine passende Antwort gefunden?

Fragen Sie die Community