随机显示幻灯片：从五个幻灯片中随机选择三个并隐藏其余幻灯片
本文介绍如何使用 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><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a>
<p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<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>
