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

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

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

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> 标签内，并放在 </script>