Ergebnis 1 bis 8 von 8
  1. #1
    Framer ist offline Grünschnabel
    registriert
    13-03-2017
    Beiträge
    3

    Question Zufällige Bilderfolge ablaufen lassen

    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

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.565

    AW: Zufällige Bilderfolge ablaufen lassen

    Zitat Zitat von Framer Beitrag anzeigen
    Kann mir hierzu jemand Hilfe leisten wie ich das mit javascript realisieren kann?
    Was hast du denn schon? Zeig' doch mal deine Versuche.

  3. #3
    Framer ist offline Grünschnabel
    registriert
    13-03-2017
    Beiträge
    3

    AW: Zufällige Bilderfolge ablaufen lassen

    Zitat Zitat von kkapsner Beitrag anzeigen
    Was hast du denn schon? Zeig' doch mal deine Versuche.
    Da ich das Script in eine HTML Datei einbinden will habe ich es bisher nur mit HTML versucht. Der Ansatz hierzu war folgender:

    HTML-Code:
    <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.

  4. #4
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.565

    AW: Zufällige Bilderfolge ablaufen lassen

    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>

  5. #5
    Framer ist offline Grünschnabel
    registriert
    13-03-2017
    Beiträge
    3

    AW: Zufällige Bilderfolge ablaufen lassen

    Vielen Dank! Das ist genau der Ansatz den ich gesucht habe!

    Gruß Framer
    Geändert von kkapsner (21-03-2017 um 18:46 Uhr) Grund: Full Quote entfernt.

  6. #6
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.565

    AW: Zufällige Bilderfolge ablaufen lassen

    Zitat Zitat von Framer Beitrag anzeigen
    Vielen Dank!
    Bitte - gern geschehen.

  7. #7
    The_C ist offline Tripel-As
    registriert
    01-08-2011
    Beiträge
    235

    AW: Zufällige Bilderfolge ablaufen lassen

    Das ist ja super!
    Aber wieso hält das immer bei der 4 an kann man das auch verändern?

  8. #8
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.565

    AW: Zufällige Bilderfolge ablaufen lassen

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

Ähnliche Themen

  1. Antworten: 7
    Letzter Beitrag: 16-03-2010, 00:00
  2. Nach Button-klick soll Funktion ablaufen
    Von Muffin im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 13-01-2007, 21:23
  3. zufällige bildauswahl
    Von larskroeger im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 18-10-2004, 16:18
  4. Random Text mit Maske ablaufen lassen
    Von markus78 im Forum Flash
    Antworten: 4
    Letzter Beitrag: 07-10-2001, 15:10
  5. Funktion langsamer ablaufen lassen
    Von Martin Grüning im Forum Allgemeines
    Antworten: 5
    Letzter Beitrag: 04-09-2001, 10:28

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •