第一段引用上面的摘要：
本文旨在提供一种解决方案，用于在网页加载时从一组幻灯片中随机选择并显示指定数量的幻灯片，同时隐藏未被选中的幻灯片。通过使用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）来显示选定的幻灯片。
.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 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() 方法可以根据第二个参数的布尔值来添加或移除指定的类名。
完整示例
随机幻灯片 .slogan { display: none; } .slogan.show { display: block; }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))) }
"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 加载完成后执行。可以将代码放在
以上就是随机显示轮播图中的指定数量幻灯片的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1513926.html
微信扫一扫 
支付宝扫一扫 
