随机显示幻灯片：从五个幻灯片中随机选择三个并隐藏其余幻灯片
本文介绍如何使用 JavaScript 从五个幻灯片中随机选择三个，并在页面加载时显示它们，同时完全隐藏未被选中的幻灯片。通过提供的代码示例和 CSS 样式，可以轻松实现幻灯片的随机展示效果，从而提升用户体验。
实现随机幻灯片展示的核心在于生成不重复的随机数，并根据这些随机数来控制幻灯片的显示与隐藏。以下是详细的步骤和代码示例：
1. HTML 结构
首先，确保你的 HTML 结构包含幻灯片容器和各个幻灯片元素。每个幻灯片元素都应该有一个唯一的标识，例如 class 名称 slogan。
"How does visual identity design help business/product value grow?"
MINE
"How can we analyze ourselves, audience, competitors, and market and help business progress/grow?"
MINE
"How can I differentiate my business from others?"
MINE
"What is the best and latest business model and plan for me?"
MINE
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 加载完成后执行，例如将其放在 标签内，并放在
以上就是随机显示幻灯片：从五个幻灯片中随机选择三个并隐藏其余幻灯片的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1513923.html
微信扫一扫 
支付宝扫一扫 
