• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Suche eine Art HTML Marquee aber KEIN Lauftext

N

nebi1907

Neues Mitglied
Servus Leute...

ich benötige eure Hilfe. Ich suche so etwas wie ein Marquee, jedoch soll kein Lauftext entstehen, sondern vorgeschriebene Texte in einer Box eine Bestimmte Zeit (z.B. 30 Sekunden lang) angezeigt werden und dann automatisch sich ändern. Die Texte, welche in der Box angezeigt werden sollen, werden IMMER die selben Sätze bleiben. Man kann sich das vorstellen, wie eine Box die Zitate von verschiedenen Personen anzeigt und z.B. alle 30 sekunden von jemand anderem ein anderes Zitat anzeigt. Wie ist sowas möglich?
 
Das könnte so aussehen. Aber nicht einfach copy&pasten, sondern lesen, verstehen und anpassen.

HTML: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Foobar</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>
    <div id="zitate"></div>
    
    <script>
        var zitate = $('#zitate').hide(),
               content = ['zitat 1', 'zitat 2', 'zitat 3', 'zitat 4', 'zitat 5'],
               count = 0;
        
        function wechselZitat() {
            zitate.fadeIn().delay(30000).fadeOut(function() {
                wechselZitat();
            }).text(content[count++]);
            
            if (count == content.length) {
                count = 0;
            }
        }
        
        wechselZitat();
    </script>
</body>
</html>
 
Tronjer schrieb:
Das könnte so aussehen. Aber nicht einfach copy&pasten, sondern lesen, verstehen und anpassen.

HTML: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Foobar</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>
    <div id="zitate"></div>
    
    <script>
        var zitate = $('#zitate').hide(),
               content = ['zitat 1', 'zitat 2', 'zitat 3', 'zitat 4', 'zitat 5'],
               count = 0;
        
        function wechselZitat() {
            zitate.fadeIn().delay(30000).fadeOut(function() {
                wechselZitat();
            }).text(content[count++]);
            
            if (count == content.length) {
                count = 0;
            }
        }
        
        wechselZitat();
    </script>
</body>
</html>
Zum Vergrößern anklicken....

Du hast es echt drauf mein lieber... DANKE ! :D
 
Das geht auch mit einem vorgefertigten Slider, der HTML-Content beherrscht, z. B. dem jQuery-Cycle-Plugin.
 
Für so eine simple Aufgabe (wofür man nur einige Zeilen JS brauchen würde) jQuery zu verwenden, ist ja ziemlich übertrieben...
 
Tronjer schrieb:
Das könnte so aussehen. Aber nicht einfach copy&pasten, sondern lesen, verstehen und anpassen.

HTML: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Foobar</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>
    <div id="zitate"></div>
    
    <script>
        var zitate = $('#zitate').hide(),
               content = ['zitat 1', 'zitat 2', 'zitat 3', 'zitat 4', 'zitat 5'],
               count = 0;
        
        function wechselZitat() {
            zitate.fadeIn().delay(30000).fadeOut(function() {
                wechselZitat();
            }).text(content[count++]);
            
            if (count == content.length) {
                count = 0;
            }
        }
        
        wechselZitat();
    </script>
</body>
</html>
Zum Vergrößern anklicken....

gibt es denn vielleicht hier noch eine Möglichkeit, dass es nicht immer die selbe Reihenfolge hat, sondern immer Zufällig anzeigt? Das wäre perfekt !
 
@Tronjer
meinst du mann kann das noch in ein "Zufallsprinzip" setzen, sodass nicht immer die selbe Reihenfolge der Zitate kommt, sondern immer zufällig gerade irgendwas?
 
Dazu müsste man noch ein random() einbauen.

HTML: 
    var quotes = ['zitat 1', 'zitat 2', 'zitat 3', 'zitat 4', 'zitat 5'];
    quotes = quotes.sort(function() {return 0.5 - Math.random()});

    var zitate = $('#zitate').hide(),
     content = quotes,
     count = 0;
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben