隨機顯示幻燈片：從五個幻燈片中隨機選擇三個並隱藏其餘幻燈片

隨機顯示幻燈片：從五個幻燈片中隨機選擇三個並隱藏其餘幻燈片

本文介紹如何使用JavaScript 從五個幻燈片中隨機選擇三個，並在頁面加載時顯示它們，同時完全隱藏未被選中的幻燈片。通過提供的代碼示例和CSS 樣式，可以輕鬆實現幻燈片的隨機展示效果，從而提升用戶體驗。

實現隨機幻燈片展示的核心在於生成不重複的隨機數，並根據這些隨機數來控制幻燈片的顯示與隱藏。以下是詳細的步驟和代碼示例：

1. HTML 結構

首先，確保你的HTML 結構包含幻燈片容器和各個幻燈片元素。每個幻燈片元素都應該有一個唯一的標識，例如class 名稱slogan。

 <div class="container">
  <section id="testim" class="testim">
    <div class="testim-cover">
      <div class="wrap">
        <span id="right-arrow" class="arrow right fa fa-chevron-right"></span>
        <span id="left-arrow" class="arrow left fa fa-chevron-left "></span>
        <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 樣式。 默認情況下，所有幻燈片都應該被隱藏，然後通過JavaScript 添加一個show 類來顯示選定的幻燈片。

 .slogan { display: none }
.slogan.show { display: block }

3. JavaScript 代碼

以下是JavaScript 代碼，用於隨機選擇三個幻燈片並顯示它們，同時隱藏其餘幻燈片。

 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') : 選擇所有class 為slogan 的元素，並將其轉換為數組。
• slogans.forEach((slogan,i) => slogan.classList.toggle("show",showList.includes(i))) : 遍歷所有幻燈片，並根據其索引是否包含在showList 數組中來切換show 類的添加和移除。 classList.toggle("show", condition) 如果condition 為true，則添加show 類；如果為false，則移除show 類。

4. 完整示例

將上述HTML、CSS 和JavaScript 代碼整合在一起，就可以實現隨機幻燈片展示的效果。 確保JavaScript 代碼在DOM 加載完成後執行，例如將其放在<script> 標籤內，並放在</script>

以上是隨機顯示幻燈片：從五個幻燈片中隨機選擇三個並隱藏其餘幻燈片的詳細內容。更多資訊請關注PHP中文網其他相關文章！