隨機顯示輪播圖中的指定數量幻燈片

第一段引用上面的摘要：

本文旨在提供一種解決方案，用於在網頁加載時從一組幻燈片中隨機選擇並顯示指定數量的幻燈片，同時隱藏未被選中的幻燈片。通過使用JavaScript和CSS，可以實現動態地展示幻燈片內容，提升用戶體驗。文章將提供詳細的代碼示例和步驟說明，幫助開發者快速實現該功能。

實現步驟

1. HTML 結構準備：

首先，確保你的HTML 結構中包含包含所有幻燈片的容器，以及每個幻燈片的元素（例如div）。每個幻燈片都應該有一個唯一的類名，例如slogan。

 <div class="container">
  <section id="testim" class="testim">
    <div class="testim-cover">
      <div class="wrap">
        <ul id="testim-dots" class="dots">
          <li class="dot active">
          <li class="dot">
          <li class="dot">
          <li class="dot">
          <li class="dot">
        </ul>
        <div id="testim-content" class="cont">
          <div class="slogan">
            <p>"How does visual identity design help business/product value grow?"</p>
            <h2>MINE</h2>
          </div>
          <div class="slogan">
            <p>"How can we analyze ourselves, audience, competitors, and market and help business progress/grow?"</p>
            <h2>MINE</h2>
          </div>
          <div class="slogan">
            <p>"How can I differentiate my business from others?"</p>
            <h2>MINE</h2>
          </div>
          <div class="slogan">
            <p>"What is the best and latest business model and plan for me?"</p>
            <h2>MINE</h2>
          </div>
          <div class="slogan">
            <p>"How will innovative targeting be achieved at each stage of business?"</p>
            <h2>MINE</h2>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

2. CSS 樣式定義：

默認情況下，隱藏所有幻燈片。然後，創建一個CSS 類（例如show）來顯示選定的幻燈片。

 .slogan {
  display: none;
}

.slogan.show {
  display: block;
}

3. JavaScript 代碼實現：

使用JavaScript 代碼來隨機選擇幻燈片並應用show 類。

 const getRandomNumber = (count) => Math.floor(Math.random() * count);
const randomNumbers = (len, count) => {
  const numbers = new Set();
  while (numbers.size  slogan.textContent.trim() !== ''
);

if (nonEmptySlogans.length >= 3) {
  const showList = randomNumbers(3, nonEmptySlogans.length); // get 3 of how many found
  slogans.forEach((slogan, i) =>
    slogan.classList.toggle('show', showList.includes(i))
  );
}

代碼解釋：

• getRandomNumber(count): 生成一個0 到count-1 之間的隨機整數。
• randomNumbers(len, count): 生成一個包含len 個不重複的隨機整數的數組，這些整數的範圍是0 到count-1。使用Set 數據結構確保生成的數字不重複。
• document.querySelectorAll('.slogan'): 獲取所有類名為slogan 的元素，並將結果轉換為數組。
• slogans.filter(slogan => slogan.textContent.trim() !== ''): 過濾掉內容為空的幻燈片。
• randomNumbers(3, nonEmptySlogans.length): 生成一個包含3 個隨機索引的數組，這些索引對應於要顯示的幻燈片。
• slogans.forEach((slogan, i) => slogan.classList.toggle('show', showList.includes(i))): 遍歷所有幻燈片，如果當前幻燈片的索引包含在showList 數組中，則添加show 類，否則移除show 類。 classList.toggle() 方法可以根據第二個參數的布爾值來添加或移除指定的類名。

完整示例

  <title>隨機幻燈片</title>
  <style>
    .slogan { display: none; }
    .slogan.show { display: block; }
  </style>



<div class="container">
  <section id="testim" class="testim">
    <div class="testim-cover">
      <div class="wrap">
        <ul id="testim-dots" class="dots">
          <li class="dot active">
          <li class="dot">
          <li class="dot">
          <li class="dot">
          <li class="dot">
        </ul>
        <div id="testim-content" class="cont">
          <div class="slogan">
            <p>"How does visual identity design help business/product value grow?"</p>
            <h2>MINE</h2>
          </div>
          <div class="slogan">
            <p>"How can we analyze ourselves, audience, competitors, and market and help business progress/grow?"</p>
            <h2>MINE</h2>
          </div>
          <div class="slogan">
            <p>"How can I differentiate my business from others?"</p>
            <h2>MINE</h2>
          </div>
          <div class="slogan">
            <p>"What is the best and latest business model and plan for me?"</p>
            <h2>MINE</h2>
          </div>
          <div class="slogan">
            <p>"How will innovative targeting be achieved at each stage of business?"</p>
            <h2>MINE</h2>
          </div>
        </div>
      </div>
    </div>
  </section>
</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 [...numbers];
  };

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

  if (nonEmptySlogans.length >= 3) {
    const showList = randomNumbers(3, nonEmptySlogans.length); // get 3 of how many found
    slogans.forEach((slogan,i) => slogan.classList.toggle("show",showList.includes(i)))
  }
</script>

注意事項

• 確保JavaScript 代碼在DOM 加載完成後執行。可以將代碼放在

以上是隨機顯示輪播圖中的指定數量幻燈片的詳細內容。更多資訊請關注PHP中文網其他相關文章！