Zeigen Sie zufällig die angegebene Anzahl von Folien im Karusselldiagramm an

Der erste Absatz zitiert die obige Zusammenfassung:

Dieser Artikel zielt darauf ab, eine Lösung für die zufällige Auswahl und Anzeige einer bestimmten Anzahl von Objektträgern aus einer Reihe von Folien bereitzustellen, wenn eine Webseite geladen wird, während nicht ausgewählte Folien versteckt. Durch die Verwendung von JavaScript und CSS können Sie den Inhalt der Folien dynamisch anzeigen und die Benutzererfahrung verbessern. Der Artikel enthält detaillierte Codebeispiele und Schrittbeschreibungen, damit Entwickler diese Funktion schnell implementieren können.

Implementierungsschritte

1. HTML -Strukturvorbereitung:

Stellen Sie zunächst sicher, dass Ihre HTML -Struktur Behälter enthält, die alle Objektträger sowie Elemente (z. B. Divs) für jede Folie enthalten. Jede Folie sollte einen eindeutigen Klassennamen wie Slogan haben.

 <div class="container">
  <abschnitt id="Testim" class="Testim">
    <div class="Testim-Cover">
      <div class="Wrap">
        <ul id="Testim-dots" class="dots">
          <li class="dot active"> </li>
          <li class="dot"> </li>
          <li class="dot"> </li>
          <li class="dot"> </li>
          <li class="dot"> </li>
        </ul>
        <div id="Testim-in-incontent" class="cont">
          <div class="slogan">
            <p> "Wie wächst das Design der visuellen Identitätsdesign, der Geschäfts-/Produktwert?" </p>
            <h2> mine </h2>
          </div>
          <div class="slogan">
            <p> "Wie können wir uns selbst, Publikum, Wettbewerber und Markt analysieren und den Geschäftsergebnis/Wachstum unterstützen?" </p>
            <h2> mine </h2>
          </div>
          <div class="slogan">
            <p> "Wie kann ich mein Geschäft von anderen unterscheiden?" </p>
            <h2> mine </h2>
          </div>
          <div class="slogan">
            <p> "Was ist das beste und neueste Geschäftsmodell und Plan für mich?" </p>
            <h2> mine </h2>
          </div>
          <div class="slogan">
            <p> "Wie wird innovatives Ziel in jeder Geschäftsphase erreicht?" </p>
            <h2> mine </h2>
          </div>
        </div>
      </div>
    </div>
  </abschnitt>
</div>

2. CSS -Stildefinition:

Standardmäßig sind alle Folien versteckt. Erstellen Sie dann eine CSS -Klasse (z. B. Show), um die ausgewählte Diashow anzuzeigen.

 .Slogan {
  Anzeige: Keine;
}

.Slogan.show {
  Anzeige: Block;
}

3. Implementierung von JavaScript -Code:

Verwenden Sie den JavaScript -Code, um die Folien zufällig auszuwählen und die SHOW -Klasse anzuwenden.

 const GetRandomNumber = (count) => math.floor (math.random () * count);
const randomNumbers = (len, count) => {
  const numbers = new set ();
  while (numbers.size <len numbers.add return number const slogans="[..." document.queryselectorall slogan nonmptyslogans="Slogans.Filter"> slogan.textContent.trim ()! == '' ''
);

if (nonMptysLogans.length> = 3) {
  const showlist = randomNumbers (3, nicht lebhafte Logans.length); // 3 davon bekommen, wie viele gefunden wurden
  Slogans.foreach ((Slogan, i) =>
    slogan.classlist.toggle ('show', showlist.includes (i))
  );
}</len>

Code Erläuterung:

• GetRandomNumber (Graf): Generiert eine zufällige Ganzzahl zwischen 0 und Count-1.
• RandomNumbers (Len, Count): Erzeugt eine Reihe von nicht repetitiven zufälligen Zahlen von Len, von 0 bis Count-1. Verwenden Sie die Datenstruktur, um sicherzustellen, dass die generierten Zahlen nicht dupliziert werden.
• document.querySelectorAll ('. Slogan'): Erhält alle Elemente mit Klassennamen Slogan und konvertiert das Ergebnis in ein Array.
• Slogans.filter (Slogan => Slogan.TextContent.trim ()! == ''): Filtern Sie die Folien mit leerem Inhalt heraus.
• RandomNumbers (3, Nicht -LeerySlogans.Length): Erzeugt ein Array von 3 zufälligen Indizes, die der zu angezeigten Folie entsprechen.
• Slogans.foreach ((Slogan, i) => slogan.classlist.toggle ('show', showlist.includes (i))): Iteriert alle Folien, fügt die Showklasse hinzu, wenn der Index der aktuellen Folie im Showlist -Array enthalten ist, ansonsten die Show -Klasse entfernt. Die Methode classlist.toggle () kann den angegebenen Klassennamen basierend auf dem Booleschen Wert des zweiten Parameters hinzufügen oder entfernen.

Vollständiges Beispiel

 

<kopf>
  <title> Zufällige Folie </title>
  <styles>
    .Slogan {display: keine; }
    .Slogan.show {display: block; }
  



<div class="container">
  <abschnitt id="Testim" class="Testim">
    <div class="Testim-Cover">
      <div class="Wrap">
        <ul id="Testim-dots" class="dots">
          <li class="dot active"> </li>
          <li class="dot"> </li>
          <li class="dot"> </li>
          <li class="dot"> </li>
          <li class="dot"> </li>
        </ul>
        <div id="Testim-in-incontent" class="cont">
          <div class="slogan">
            <p> "Wie wächst das Design der visuellen Identitätsdesign, der Geschäfts-/Produktwert?" </p>
            <h2> mine </h2>
          </div>
          <div class="slogan">
            <p> "Wie können wir uns selbst, Publikum, Wettbewerber und Markt analysieren und den Geschäftsergebnis/Wachstum unterstützen?" </p>
            <h2> mine </h2>
          </div>
          <div class="slogan">
            <p> "Wie kann ich mein Geschäft von anderen unterscheiden?" </p>
            <h2> mine </h2>
          </div>
          <div class="slogan">
            <p> "Was ist das beste und neueste Geschäftsmodell und Plan für mich?" </p>
            <h2> mine </h2>
          </div>
          <div class="slogan">
            <p> "Wie wird innovatives Ziel in jeder Geschäftsphase erreicht?" </p>
            <h2> mine </h2>
          </div>
        </div>
      </div>
    </div>
  </abschnitt>
</div>

<script>
  const GetRandomNumber = count => math.floor (math.random () * count);
  const randomNumbers = (len, count) => {
    const numbers = new set ();
    while (numbers.size <len) numbers.add (getrandomnumber (count));
    return [... number];
  };

  const slogans = [... document.querySelectorAll (&#39;. Slogan&#39;)];
  const noneMptySlogans = Slogans.filter (Slogan => slogan.textContent.trim ()! == &#39;&#39;);

  if (nonMptysLogans.length> = 3) {
    const showlist = randomNumbers (3, nicht lebhafte Logans.length); // 3 davon bekommen, wie viele gefunden wurden
    Slogans.foreach ((Slogan, i) => slogan.classlist.toggle ("show", showlist.includes (i))
  }
</script>


</styles></kopf>

Das obige ist der detaillierte Inhalt vonZeigen Sie zufällig die angegebene Anzahl von Folien im Karusselldiagramm an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!