• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Zufällige Bilderfolge ablaufen lassen

F

Framer

New member
Hallo zusammen,

da ich von javascript (noch) sehr wenig Ahnung habe, hoffe ich, dass mir hier jemand helfen kann.
Ich möchte eine bestimmte Anzahl von Bildern zufällig nacheinander von oben nach unten ablaufen lassen und irgendwann stoppen, so dass ein Bild ausgewählt wird (so wie hier: https://giphy.com/gifs/3oKIPbjPowhwA6XKbm).
Kann mir hierzu jemand Hilfe leisten wie ich das mit javascript realisieren kann?

Vielen Dank schonmal!

Gruß Framer
 
kkapsner schrieb:
Was hast du denn schon? Zeig' doch mal deine Versuche.
Zum Vergrößern anklicken....

Da ich das Script in eine HTML Datei einbinden will habe ich es bisher nur mit HTML versucht. Der Ansatz hierzu war folgender:

HTML: 
<html>
<marquee direction="down" scrollamount="8" truespeed="true" scrolldelay="1" ><img src="beispiel.png" /></marquee>
</html>

Jedoch war mir dann klar, dass es höchstwahrscheinlich nicht vollständig mit HTML realisierbar ist und wollte deshalb Hilfe wie es denn mit javascript umsetzbar ist.
 
Mit einem marquee wird das nicht funktionieren, da dieses nicht aufhört zu scrollen und das zufällige wird damit auch schwierig.

Du musst die Animation mit JS bauen - in etwa so:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
#roller {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	overflow: hidden;
	position: relative;
}
#roller .container {
	height: 100%;
}
#roller .entry {
	border-top: 1px solid black;
	display: block;
	height: 100%;
	width: 100%;
	left: 0;
	text-align: center;
	vertical-align: middle;
}
</style>
</head>
<body>
<div id="roller">
	<div class="container">
		<span class="entry">1</span>
		<span class="entry">2</span>
		<span class="entry">3</span>
		<span class="entry">4</span>
		<span class="entry">5</span>
	</div>
</div>
<script type="text/javascript">
	(function(){
		var roller = document.querySelector("#roller .container");
		Array.from(roller.childNodes).forEach(function(child){
			if (child.nodeType === 3){
				roller.removeChild(child);
			}
		});
		for (var i = Math.floor(Math.round() * 5); i > 0; i -= 1){
			roller.appendChild(roller.firstChild);
		}
		var speed = -15;
		var marginTop = 0;
		function scroll(){
			marginTop += speed;
			speed *= 0.995;
			while (-marginTop > roller.clientHeight){
				marginTop += roller.firstChild.offsetHeight;
				roller.appendChild(roller.firstChild);
			}
			roller.style.marginTop = marginTop + "px";
			if (speed < -1 || Math.round(marginTop) != -1){
				window.requestAnimationFrame(scroll);
			}
		}
		scroll();
	}());
</script>
</body>
</html>
 
Vielen Dank! Das ist genau der Ansatz den ich gesucht habe!

Gruß Framer
 
Zuletzt bearbeitet von einem Moderator:
Ah... kleiner Fehler:
Code: 
		for (var i = Math.floor(Math.random() *5); i > 0; i -= 1){
			roller.appendChild(roller.firstChild);
		}

- - - Aktualisiert - - -

Math.round() !== Math.random() ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben