第一段引用上面的摘要：
本文旨在提供一种解决方案，用于在网页加载时从一组幻灯片中随机选择并显示指定数量的幻灯片，同时隐藏未被选中的幻灯片。通过使用JavaScript和CSS，可以实现动态地展示幻灯片内容，提升用户体验。文章将提供详细的代码示例和步骤说明，帮助开发者快速实现该功能。
实现步骤
- HTML 结构准备：
首先，确保你的 HTML 结构中包含包含所有幻灯片的容器，以及每个幻灯片的元素（例如 div）。每个幻灯片都应该有一个唯一的类名，例如 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
"How will innovative targeting be achieved at each stage of business?"
MINE
- CSS 样式定义：
默认情况下，隐藏所有幻灯片。然后，创建一个 CSS 类（例如 show）来显示选定的幻灯片。
后台路径网址+admin（请修改更安全）后台用户名密码admin产品定位：中小型企业，本系统简单实用，无冗余功能,无功能限制。后台功能：一、网站基本信息此功能允许您从后台设置网站的名称、联系人、电话、公司地址、版权、第三方统计代码等等常用信息。二、导航栏设置可以从后台调整导航栏显示项目，可以进行增加删除排序隐藏导航栏等操作三、幻灯设置可以从后台设置前台动画轮播图片，支持排序。四、单页功能用来设置公
.slogan {
display: none;
}
.slogan.show {
display: block;
}- JavaScript 代码实现：
使用 JavaScript 代码来随机选择幻灯片并应用 show 类。
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'): 获取所有类名为 slogan 的元素，并将结果转换为数组。
- slogans.filter(slogan => slogan.textContent.trim() !== ''): 过滤掉内容为空的幻灯片。
- randomNumbers(3, nonEmptySlogans.length): 生成一个包含 3 个随机索引的数组，这些索引对应于要显示的幻灯片。
- slogans.forEach((slogan, i) => slogan.classList.toggle('show', showList.includes(i))): 遍历所有幻灯片，如果当前幻灯片的索引包含在 showList 数组中，则添加 show 类，否则移除 show 类。 classList.toggle() 方法可以根据第二个参数的布尔值来添加或移除指定的类名。
完整示例
随机幻灯片
"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
注意事项
- 确保 JavaScript 代码在 DOM 加载完成后执行。可以将代码放在
