Erledigt: Script, das zufällig 1 aus X DIVs anzeigt

 


Erik Hehrmann
Veteran

31.07.08
11:59 Uhr
Suche ein Script (JS), dass mir aus einem Pool von sagen wir 10 verschiedenen DIVs eines zufällig auswählt und kombinierbar ist mit Script.aculo.us o.ä.

Folgendes habe ich vor:

Eine Slideshow von Teasern, alle auf der selben Stelle. Alle 10 Sekunden wechselt der Teaser. Das würde ich schonmal mit Script.aculo.us hinkriegen. Jetzt soll aber bei jedem Aufruf der Seite diese Slideshow mit einem anderen DIV beginnen. Meinetwegen muss es auch kein Zufall sein, sondern so, dass es beim ersten Aufruf mit DIV 1 beginnt, beim nächsten mit DIV 2, etc...

Oder gar so, dass es sich merkt, welche DIVs durch die Slideshow schon angezeigt wurden und automatisch beim nächsten weiter macht?

Ach, und die Reihenfolge der DIVs darf auch gern zufällig sein, statt 1, 2, 3, ... 10.

Alles automatisch, alles Zufall! cheer

Besten Dank für eure Hilfe!
Link zu diesem Beitrag in die Zwischenablage kopieren
Mister Ad
Werbung
Schon mal bei Saturn, DaWanda oder notebooksbilliger.de geguckt? Vielleicht wirst du dort fuendig.

 
shini
Veteran

31.07.08
12:20 Uhr
Irrelevanter Beitrag (anzeigen):

Link zu diesem Beitrag in die Zwischenablage kopieren
offense
Gast

31.07.08
16:42 Uhr
kleiner lösungsansatz:

  1. <style type="text/css">
  2. div {
  3. display:none;
  4. }
  5. </style>
  6.  
  7. <div id="id1">Div 1</div>
  8. <div id="id2">Div 2</div>
  9. <div id="id3">Div 3</div>
  10. <div id="id4">Div 4</div>
  11. <div id="id5">Div 5</div>
  12. <div id="id6">Div 6</div>
  13.  
  14. <script type="text/javascript">
  15.  
  16. anzahlDivs = 6;
  17. i = (Math.floor(Math.random()*anzahlDivs)+1);
  18.  
  19. document.getElementById("id"+i).style.display = "inline";
  20.  
  21. </script>
Quelltext in Zwischenablage kopieren
Link zu diesem Beitrag in die Zwischenablage kopieren
Erik Hehrmann
Veteran

04.08.08
14:12 Uhr
Hm, das macht leider so noch nichts. Hab es wie folgt eingebaut und sehe keine DIVs:

  1. <script type="text/javascript">
  2.  
  3. anzahlDivs = 6;
  4. i = (Math.floor(Math.random()*anzahlDivs)+1);
  5.  
  6. document.getElementById("ib"+i).style.display = "inline";
  7.  
  8. </script>
  9.  
  10. </head>
  11.  
  12. <body>
  13.  
  14. <div class="index-banner">
  15. <div id="ib1" style="display:none;">Div 1</div>
  16. <div id="ib2" style="display:none;">Div 2</div>
  17. <div id="ib3" style="display:none;">Div 3</div>
  18. <div id="ib4" style="display:none;">Div 4</div>
  19. <div id="ib5" style="display:none;">Div 5</div>
  20. <div id="ib6" style="display:none;">Div 6</div>
  21. </div>
Quelltext in Zwischenablage kopieren

Ideen? planlos
Link zu diesem Beitrag in die Zwischenablage kopieren
offense
Gast

04.08.08
14:33 Uhr
Kann vielleicht daran liegen, dass das JS aufgerufen wird bevor die DIVs geladen sind.

Du kannst ja am besten eine Funktion draus machen und die dann onload aufrufen ... oder einfach so wie mein Quelltext oben.
Link zu diesem Beitrag in die Zwischenablage kopieren
Erik Hehrmann
Veteran

04.08.08
14:49 Uhr
Krass, nur und genau daran lag es... Perfekt!

Das zufällig Aufrufen eines der sechs DIVs geht nun. Jetzt brauch ich nur noch einen Ansatz, wie ich eine Slideshow ablaufen lassen kann.

Ideen? ;)
Link zu diesem Beitrag in die Zwischenablage kopieren
JanB
Veteran

04.08.08
18:10 Uhr
Du meinst so, dass immer für ein paar Sekunden ein zufälliger div eingeblendet wird?
Link zu diesem Beitrag in die Zwischenablage kopieren
Erik Hehrmann
Veteran

04.08.08
18:11 Uhr
Genau. Erst wählt die Zufallsfunktion ein DIV aus, das als erstes angezeigt wird. Nach ein paar Sekunden Verweildauer auf der Seite wechselt das DIV automatisch in ein anderes (mit nem feinen Fading z.B.).
Link zu diesem Beitrag in die Zwischenablage kopieren
offense
Gast

04.08.08
18:34 Uhr
  1. timerid = setInterval("switchDIVs()", 5000);
Quelltext in Zwischenablage kopieren

damit rufst du alle 5000 ms die angegebene funktion auf. in die funktion kannst du dann ja auch ein fading aus Script.aculo.us oder ähnlichen packen
Link zu diesem Beitrag in die Zwischenablage kopieren
Erik Hehrmann
Veteran

04.08.08
19:12 Uhr
Ui, da bin ich noch zu unbehofen im JavaScript.
Ich muss also eine Funktion bauen. OK.

Vorher hatte ich einfach:
  1. <script type="text/javascript">
  2. anzahlDivs = 6;
  3. i = (Math.floor(Math.random()*anzahlDivs)+1);
  4. document.getElementById("ib"+i).style.display = "block";
  5. </script>
Quelltext in Zwischenablage kopieren

Und jetzt brauch ich noch ne Funktion, die meinetwegen „switchDIVs()“ heißt:
  1. function switchDIVs() {}
Quelltext in Zwischenablage kopieren

So, und irgendwo muss noch
  1. timerid = setInterval("switchDIVs()", 5000);
Quelltext in Zwischenablage kopieren
hin.

Wer hilft mir beim Puzzlen? ;)

Danke!
Link zu diesem Beitrag in die Zwischenablage kopieren
offense
Gast

04.08.08
19:51 Uhr
  1. <div id="id1">Div 1</div>
  2. <div id="id2">Div 2</div>
  3. <div id="id3">Div 3</div>
  4. <div id="id4">Div 4</div>
  5. <div id="id5">Div 5</div>
  6. <div id="id6">Div 6</div>
  7.  
  8. <script type="text/javascript">
  9.  
  10. function switchDIVs(anzahlDivs) {
  11.  
  12. // Alle DIVs ausblenden
  13. for(i=1;i<=anzahlDivs;i++) {
  14. document.getElementById("id"+i).style.display = "none";
  15. }
  16.  
  17. // Zufallszahl zwischen 1 und anzahlDivs ermitteln
  18. k = (Math.floor(Math.random()*anzahlDivs)+1);
  19.  
  20. // DIV mit der Id der ermittelten Zufallszahl einblenden
  21. document.getElementById("id"+k).style.display = "inline";
  22. }
  23.  
  24. // ruft jede Sekunde die Funktion auf
  25. timerid = setInterval("switchDIVs(6)", 1000);
  26.  
  27. // einmalig beim Aufrufen der Seite Funktion ausführen
  28. switchDIVs(6);
  29.  
  30. </script>
Quelltext in Zwischenablage kopieren

z.B. so ja
Link zu diesem Beitrag in die Zwischenablage kopieren
Logan
Veteran

04.08.08
20:09 Uhr
könntest zusätzlich noch verhindern, dass 2 mal das gleiche gezeigt wird indem du das aktuelle k wieder an die funktion übergibst
  1. function switchDIVs(anzahlDivs, a) {
  2. ...
  3. // Zufallszahl zwischen 1 und anzahlDivs ermitteln
  4. do {
  5. k = (Math.floor(Math.random()*anzahlDivs)+1);
  6. } while (k == a);
  7. ...
Quelltext in Zwischenablage kopieren
Link zu diesem Beitrag in die Zwischenablage kopieren
Erik Hehrmann
Veteran

04.08.08
21:24 Uhr
Super, der Wechsel der DIVs läuft!

Das mit dem Filtern von „Zwillingen“ irgendwie nicht.

Aber: Echt klasse, wie ihr mir helft! Danke!!!

Nun auch noch ein Fading einzubauen, übersteigt meine Kenntnisse.
Hab es versucht mit einem onload im jeweiligen DIV. Aber das Fading soll ja nicht bei onload kommen (werden ja alle quasi qleichzeitig geladen), sondern erst, wenn es „dran“ ist. Muss dann also irgendwie in den folgenden Code (jetziger Stand) eingebaut werden...

  1. <script type="text/javascript">
  2.  
  3. function switchDIVs(anzahlDivs, a) {
  4.  
  5. // Alle DIVs ausblenden
  6. for(i=1;i<=anzahlDivs;i++) {
  7. document.getElementById("ib"+i).style.display = "none";
  8. }
  9.  
  10. // Zufallszahl zwischen 1 und anzahlDivs ermitteln
  11. do {
  12. k = (Math.floor(Math.random()*anzahlDivs)+1);
  13. } while (k == a);
  14.  
  15. // DIV mit der Id der ermittelten Zufallszahl einblenden
  16. document.getElementById("ib"+k).style.display = "block";
  17. Effect.Appear('"ib"+k');
  18. }
  19.  
  20. // ruft jede X Sekunden die Funktion auf
  21. timerid = setInterval("switchDIVs(6)", 3000);
  22.  
  23. // einmalig beim Aufrufen der Seite Funktion ausführen
  24. switchDIVs(6);
  25.  
  26. </script>
Quelltext in Zwischenablage kopieren

P.S.: Ja, meine DIVs heißen „ib“ (was für index banner steht) statt „id“, nicht, dass ihr euch wundert, dass ich das ständig wieder abändere, wenn ihr „id“ verwendet ;)
Link zu diesem Beitrag in die Zwischenablage kopieren
loeffler
Veteran

04.08.08
21:33 Uhr
Hab grad aus langeweile mal aufbauend auf den ganzen Code schnipseln hier was mit jQuery gebastelt: http://www.kosmonauten.cc/stuff/divfade/
Getestet mit ff3, Opera und ie7.

Meinst du in etwa sowas?

ps: Entschuldigt bitte die Bilder, ich hatte sonst nix zeigbares da, das mehr oder weniger einheitlich ist pee
Link zu diesem Beitrag in die Zwischenablage kopieren
Erik Hehrmann
Veteran

05.08.08
00:05 Uhr
Danke! Genau das ist es und es läuft bestens (OSX FF3 und Safari 3).

Langeweile cheer
Link zu diesem Beitrag in die Zwischenablage kopieren
 
#