Wie erstelle ich mit Javascript ein Daumenkino?

...komplette Frage anzeigen

3 Antworten

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 bewerten Vielen Dank für Deine Bewertung

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 bewerten Vielen Dank für Deine Bewertung

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++;}
Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von Minilexikon
22.02.2016, 13:33

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

0

Was möchtest Du wissen?