本文旨在提供一种使用 JavaScript 从轮播图中随机选择并显示指定数量 slides 的方法。通过修改 HTML 结构和添加 CSS 样式，并结合 JavaScript 代码，可以实现每次页面加载时，轮播图随机展示预设数量 slides 的效果，而其余 slides 则会被隐藏。本文将提供详细的代码示例和步骤说明，帮助开发者轻松实现这一功能。
实现步骤
- HTML 结构调整
确保 HTML 结构包含一个容器元素（例如
"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
"How will innovative targeting be achieved at each stage of business?"
MINE
- CSS 样式设置
首先，将所有 slide 元素默认隐藏。然后，创建一个 CSS 类（例如 show），用于显示选中的 slide 元素。
.slogan {
display: none;
}
.slogan.show {
display: block;
}- JavaScript 代码实现
使用 JavaScript 代码实现以下功能：
- 获取所有的 slide 元素。
- 生成指定数量的随机数，作为需要显示的 slide 元素的索引。
- 遍历所有的 slide 元素，判断其索引是否在随机数列表中。
- 如果索引在列表中，则添加 show 类，显示该 slide 元素；否则，移除 show 类，隐藏该 slide 元素。
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); // get 3 of how many found
slogans.forEach((slogan,i) => slogan.classList.toggle("show",showList.contains(i)))
}代码解释：
- getRandomNumber(count)：生成一个 0 到 count-1 之间的随机整数。
- randomNumbers(len, count)：生成一个包含 len 个不重复的随机整数的数组，每个整数的范围是 0 到 count-1。 使用 Set 保证数字的唯一性。
- document.querySelectorAll('.slogan')：获取所有类名为 slogan 的元素。
- slogans.forEach((slogan, i) => ...)：遍历所有的 slide 元素，slogan 是当前的 slide 元素，i 是其索引。
- slogan.classList.toggle("show", showList.contains(i))：如果 showList 包含当前 slide 元素的索引 i，则添加 show 类，否则移除 show 类。
完整示例
将上述 HTML、CSS 和 JavaScript 代码整合在一起，即可实现随机展示轮播图中的指定数量 slides 的功能。
Random Slides
"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
"How will innovative targeting be achieved at each stage of business?"
MINE
注意事项：
- 确保 CSS 样式在 JavaScript 代码执行之前加载，否则可能出现样式闪烁的问题。
- 可以根据实际需求修改随机选择的 slide 数量。
- 如果需要支持动态添加或删除 slide 元素，需要重新执行 JavaScript 代码，更新显示的 slide 元素。
总结
通过本文的介绍，您已经掌握了如何使用 JavaScript 从轮播图中随机选择并显示指定数量 slides 的方法。 这种方法可以应用于各种场景，例如展示随机推荐内容、突出显示特定主题等。 通过灵活运用这些技术，可以为用户提供更加个性化和动态的体验。
