随机显示幻灯片：从五个幻灯片中随机选择三个并隐藏其余幻灯片-js教程-PHP中文网

随机显示幻灯片：从五个幻灯片中随机选择三个并隐藏其余幻灯片

碧海醫心

发布： 2025-08-06 19:48:24

原创

664人浏览过

随机显示幻灯片：从五个幻灯片中随机选择三个并隐藏其余幻灯片

本文介绍如何使用 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>
          <li class="dot"></li>
          <li class="dot"></li>
          <li class="dot"></li>
          <li class="dot"></li>
        </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 代码，用于随机选择三个幻灯片并显示它们，同时隐藏其余幻灯片。

幻舟AI

专为短片创作者打造的AI创作平台

173

查看详情

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('.slogan')];
const nonEmptySlogans = slogans.filter(slogan => 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> 标签内，并放在 </body> 标签之前。

注意事项：