随机显示幻灯片：从五个幻灯片中随机选择三个并隐藏其余幻灯片
本文介绍如何使用 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>
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
