动态控制幻灯片显示：JavaScript随机选择与CSS隐藏策略

程序猿 • 2025年12月20日 08:08:24 • 用户投稿

本教程将详细讲解如何使用JavaScript和CSS实现网页幻灯片的动态显示控制。通过随机选择指定数量的幻灯片并隐藏其余部分，确保页面加载时仅展示所需内容。文章将提供核心代码示例，并探讨如何将此逻辑与现有滑块组件有效整合，同时指出潜在的优化方向。

问题解析：随机选择与隐藏幻灯片

在构建带有多个幻灯片的滑块组件时，有时需要实现动态内容展示，例如从一组幻灯片中随机选择特定数量的幻灯片进行显示，而将其余未选中的幻灯片完全隐藏。用户遇到的问题是，尽管尝试通过javascript随机选择并填充内容，但所有幻灯片仍然可见，导致未选中的幻灯片显示为空白，而非完全隐藏。这不仅影响了视觉效果，也可能干扰滑块的正常交互逻辑。

核心需求是：

从总共五张幻灯片中，随机选择三张。被选中的三张幻灯片正常显示。未被选中的两张幻灯片必须完全隐藏，即不占据任何空间，不显示空白。

核心思路：基于CSS的随机显示与隐藏

解决此问题的最佳实践是结合JavaScript的随机选择能力与CSS的显示控制属性。

JavaScript负责逻辑：获取所有幻灯片元素。生成一个包含所需数量（例如3个）的唯一随机索引的列表。遍历所有幻灯片，如果当前幻灯片的索引在随机列表中，则为其添加一个特定的CSS类（例如show）。CSS负责样式：默认情况下，所有幻灯片都设置为隐藏（display: none）。为带有特定CSS类（例如.slogan.show）的幻灯片设置显示属性（display: block）。

这种方法将内容逻辑与表现层分离，使得代码更清晰、更易维护，并且利用CSS的渲染效率来控制元素的显示状态。

JavaScript实现：随机选择逻辑

首先，我们需要一个函数来生成指定范围内的随机数，以及一个函数来生成指定数量的、不重复的随机数（即幻灯片索引）。

立即学习“Java免费学习笔记（深入）”；

/** * 生成一个指定范围内的随机整数。 * @param {number} count - 随机数的上限（不包含）。 * @returns {number} 随机整数。 */const getRandomNumber = count => Math.floor(Math.random() * count);/** * 生成指定长度的、不重复的随机数数组。 * @param {number} len - 需要生成的随机数数量。 * @param {number} count - 随机数的上限（不包含），即总元素数量。 * @returns {number[]} 包含唯一随机数的数组。 */const randomNumbers = (len, count) => {  const numbers = new Set(); // 使用 Set 确保生成的数字是唯一的  while (numbers.size = 3) {  // 生成3个随机的、不重复的幻灯片索引  const showListIndices = randomNumbers(3, slogans.length);  // 将索引数组转换为 Set，以便后续快速查找  const showListSet = new Set(showListIndices);  // 遍历所有幻灯片，根据索引决定是否添加 'show' 类  slogans.forEach((slogan, i) => {    // 如果当前幻灯片的索引在随机选择的集合中，则添加 'show' 类，否则移除    slogan.classList.toggle("show", showListSet.has(i));  });}

代码解析：

getRandomNumber(count)：这是一个简单的辅助函数，用于生成从0到count-1之间的随机整数。randomNumbers(len, count)：这是核心函数，它利用Set数据结构来确保生成的随机索引是唯一的。Set会自动处理重复值的添加，因此我们只需循环直到Set的大小达到len（所需数量）即可。document.querySelectorAll(‘.slogan’)：选择所有带有slogan类的HTML元素。使用扩展运算符…将其转换为真正的数组，以便使用forEach等数组方法。slogans.length >= 3：一个简单的条件检查，确保我们有足够的幻灯片来选择3张。showListIndices：存储了被随机选中的幻灯片的索引。showListSet：将索引数组转换为Set，这样做的好处是，在forEach循环中通过showListSet.has(i)检查索引是否存在时，查找效率非常高。slogan.classList.toggle(“show”, showListSet.has(i))：这是关键一步。classList.toggle()方法根据第二个参数（一个布尔值）来决定是添加还是移除指定的类。如果showListSet.has(i)为true，则添加show类；如果为false，则移除show类。

CSS样式：控制幻灯片显示

为了配合JavaScript的逻辑，我们需要定义相应的CSS规则。

.slogan {  display: none; /* 默认情况下，所有幻灯片都隐藏 */}.slogan.show {  display: block; /* 带有 'show' 类的幻灯片显示为块级元素 */}

样式解析：

.slogan { display: none; }：这是基础规则，确保页面加载时，所有幻灯片默认都是不可见的。.slogan.show { display: block; }：当JavaScript为某个.slogan元素添加了show类时，这条规则会覆盖默认的display: none，使其显示出来。

整合现有滑块代码

为了使随机选择逻辑在页面加载时生效，并与现有的滑块功能协同工作，我们需要将上述JavaScript代码放置在window.onload事件监听器内部，且必须在滑块初始化（例如playSlide(currentSlide)调用）之前执行。

以下是整合后的JavaScript结构示例：

window.onload = function() {  // --- 幻灯片随机选择逻辑开始 ---  const getRandomNumber = count => Math.floor(Math.random() * count);  const randomNumbers = (len, count) => {    const numbers = new Set();    while (numbers.size = 3) {    const showListIndices = randomNumbers(3, slogans.length);    const showListSet = new Set(showListIndices);    slogans.forEach((slogan, i) => {      slogan.classList.toggle("show", showListSet.has(i));    });  }  // --- 幻灯片随机选择逻辑结束 ---  // --- 原有滑块脚本开始 ---  'use strict';  var testim = document.getElementById("testim"),    testimDots = Array.prototype.slice.call(document.getElementById("testim-dots").children),    testimContent = Array.prototype.slice.call(document.getElementById("testim-content").children),    testimLeftArrow = document.getElementById("left-arrow"),    testimRightArrow = document.getElementById("right-arrow"),    testimSpeed = 4500,    currentSlide = 0,    currentActive = 0,    testimTimer,    touchStartPos,    touchEndPos,    touchPosDiff,    ignoreTouch = 30;  // Testim Script  function playSlide(slide) {    for (var k = 0; k < testimDots.length; k++) {      testimContent[k].classList.remove("active");      testimContent[k].classList.remove("inactive");      testimDots[k].classList.remove("active");    }    if (slide  testimContent.length - 1) {      slide = currentSlide = 0;    }    if (currentActive != currentSlide) {      testimContent[currentActive].classList.add("inactive");    }    testimContent[slide].classList.add("active");    testimDots[slide].classList.add("active");    currentActive = currentSlide;    clearTimeout(testimTimer);    testimTimer = setTimeout(function() {      playSlide(currentSlide += 1);    }, testimSpeed)  }  testimLeftArrow.addEventListener("click", function() {    playSlide(currentSlide -= 1);  });  testimRightArrow.addEventListener("click", function() {    playSlide(currentSlide += 1);  });  for (var l = 0; l  0 + ignoreTouch) {      testimLeftArrow.click();    } else if (touchPosDiff < 0 - ignoreTouch) {      testimRightArrow.click();    } else {      return;    }  });  // --- 原有滑块脚本结束 ---};

HTML结构（保持不变）：

                                              
          
          
          
          
        
                              "How does visual identity design help business/product value grow?"
            MINE
          
                      "How can we analyze ourselves,

以上就是动态控制幻灯片显示：JavaScript随机选择与CSS隐藏策略的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1513987.html

ai css html元素 switch

打赏

微信扫一扫

支付宝扫一扫

0 0

关于作者

程序猿签约作者

413.8K 文章

0 评论

2 粉丝

这个人很懒，什么都没有留下～

MongoDB时间戳区间内字段值相减教程

上一篇 2025年12月20日 08:08:21

深度解析：Android应用在Killed状态下通知回调失效的OEM限制

下一篇 2025年12月20日 08:08:40

163邮箱官网手机免费入口 163免费邮箱移动登录

163邮箱官网手机免费入口可通过访问mail.163.com自动跳转至移动版，或在应用商店下载“网易邮箱”App登录，支持多账号管理、邮件收发、附件添加、消息推送及多设备同步，并提供登录保护、主题自定义和垃圾邮件过滤等安全与个性化功能。 163邮箱官网手机免费入口在哪里？这是不少网友都关注的，接下来…

程序猿
2026年9月24日 • 用户投稿
0000
DeepSeek能不能帮我写代码简单编程任务如何交给DeepSeek完成

很多用户好奇，像DeepSeek这样的AI模型能否帮助完成编程任务，特别是那些相对简单的编程需求。答案是肯定的。DeepSeek具备理解自然语言描述并尝试生成相应代码的能力，这使得它成为完成一些简单编程任务的有力工具。 ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepS…

程序猿
2026年9月24日 • 用户投稿
1000
用户投稿

ubuntu如何mount网络驱动器

在ubuntu中挂载网络驱动器有多种方法，以下是一些常见的方法：方法一：使用mount命令确定网络驱动器的地址：例如，如果是Samba共享，地址可能是smb://server/share。如果是NFS共享，地址可能是nfs://server/share。安装必要的软件包：对于Samba共享，安装…

程序猿
2026年9月24日
0000
Java中双精度浮点数的小数位控制技巧

本文深入探讨了在Java中有效控制double类型数值小数位数的方法。通过Math.round()函数结合乘除操作，可以实现数值本身的四舍五入并改变其精度；而String.format()则提供了灵活的字符串格式化功能，用于在不修改原始数值的情况下精确控制显示的小数位数。这两种方法分别适用于不同的业…

程序猿
2026年9月24日 • 用户投稿
0000
Steam新游周报：经典恐怖游戏新作登场！

十一国庆前的最后一周，Steam上又有许多令人兴奋的新作发布！本周策略玩家与模拟建设玩家有福了，将有数款新作等着你们，体育爱好者们则能玩到EA一款足球年货游戏，而本周黑马则是一款来自科乐美的经典日式恐怖游戏。让我们进入这周的新游周报吧！周一（9月22日）名望（抢先体验） Steam商店页面：名望…

程序猿
2026年9月24日 • 用户投稿
0000
用户投稿

高质量免费logo设计网站国产免费logo生成工具推荐

国产免费Logo设计网站推荐即时设计、DesignEvo、牛人设计等，这些平台提供海量模板、支持中文输入与AI智能生成，具备全中文界面、本土化元素和矢量导出功能，适合零基础用户快速制作高质量Logo。高质量免费logo设计网站国产免费logo生成工具推荐这是不少网友都关注的接下来由PHP小编为大家…

程序猿
2026年9月24日
2000
用户投稿

如何通过BIOS调整CPU电压实现节能？

答案：CPU降压通过BIOS调整Vcore电压，采用Offset模式在保证稳定前提下降低功耗与温度，提升能效；需结合HWiNFO64等工具监控温度、功耗，并用Prime95等压力测试验证稳定性，避免蓝屏或崩溃，合理设置可使CPU在更低温度下维持更高睿频，实现节能且不牺牲性能。通过BIOS调整CPU…

程序猿
2026年9月24日
7000
用户投稿

为什么GPU显存带宽比容量更重要？

显存带宽比容量更重要，因其直接决定数据传输速度，影响GPU计算单元的利用率。在AI训练和高分辨率渲染中，高带宽可避免“数据饥饿”，确保海量数据高效流转，而HBM技术凭借3D堆叠和宽接口提供远超GDDR的带宽，成为高性能计算的关键。 GPU显存带宽比容量更重要，核心在于现代GPU的工作模式和其处理的数…

程序猿
2026年9月24日
1000
用户投稿

VSCode如何实现代码热重载 VSCode实时预览开发的高效配置方案

使用live server扩展实现静态文件的实时预览，保存后浏览器自动刷新；2. 利用现代前端框架（如react、vue）内置的开发服务器（如vite、webpack dev server）实现hmr热模块替换，修改代码后仅更新变动模块而不刷新页面；3. 结合browsersync等工具实现多设备同…

程序猿
2026年9月24日
0000
用户投稿

mysql临时表如何使用_PHP中操作mysql临时表的具体步骤

MySQL临时表仅在当前会话可见，连接关闭后自动删除，适合中间数据处理。使用PHP操作时，先通过mysqli或PDO建立数据库连接，再执行CREATE TEMPORARY TABLE语句创建临时表，随后可像普通表一样进行INSERT、SELECT及JOIN等操作。临时表可与永久表同名且优先被使用，支…

程序猿
2026年9月24日
0000
用户投稿

Java语法基础中static关键字可以修饰哪些内容

static关键字用于定义类成员，包括静态变量（如计数器）、静态方法（如工具方法）、静态代码块（类加载时执行）和静态内部类（不依赖外部类实例），均属于类而非对象，通过类名访问，提升成员至类级别实现共享与提前使用。 static 关键字在 Java 中主要用于定义与类相关而非与对象实例相关的成员。它不…

程序猿
2026年9月24日
1000
苹果过时产品名单更新，M5 iPad Pro 开箱视频流出

日前，苹果已将 iphone 11 pro max 和 apple watch series 3 的所有型号列入“过时产品”（vintage product）行列。根据苹果的规定，一款产品在停止销售满 5 年后，可能会被归为“过时产品”。不过，这一分类并不会显著影响售后服务——苹果仍会继续为这些设…

程序猿
2026年9月24日 • 用户投稿
6000
用户投稿

VSCode如何实现AI版本迁移辅助 VSCode跨版本升级的智能建议

vscode的“ai版本迁移辅助”并非独立功能，而是通过扩展兼容性检查、设置同步、lsp/dap协议支持及社区资源等生态能力协同实现；2. 升级后扩展无法工作时，应检查更新日志、尝试降级或重新安装扩展、禁用冲突扩展、查看控制台错误信息并向作者报告问题；3. 备份设置和扩展列表可通过启用设置同步、手动…

程序猿
2026年9月24日
10000
用户投稿

php-gd怎样处理图像异常_php-gd图像处理错误捕获

PHP-GD 图像处理需主动捕获警告、检查返回值、预验证文件类型并调整内存限制，通过错误处理器和异常封装避免崩溃。 PHP-GD 库在处理图像时，可能会因为文件格式错误、内存不足、不支持的图像类型或函数调用不当等原因导致异常。由于 GD 函数大多不会抛出异常，而是返回 false 或产生警告，因此需…

程序猿
2026年9月24日
1000
用户投稿

MAC系统怎么开启防火墙_MAC开启防火墙教程

1、建议在Mac系统中开启防火墙以提升网络安全，可通过“系统设置”中的“网络-防火墙”选项启用；2、高级用户可使用终端命令sudo /usr/libexec/ApplicationFirewall/socketfilterfw –setglobalstate on开启服务；3、启用后可在…

程序猿
2026年9月24日
1000
用户投稿

如何在Linux中切换用户身份？

Linux中切换用户主要用su和sudo命令；2. su切换用户需密码，su -可加载完整环境；3. sudo允许授权用户以root等身份执行命令而无需对方密码；4. 推荐使用sudo -i或sudo su -切换到root；5. 普通用户需加入sudo组或配置/etc/sudoers文件；6. 编…

程序猿
2026年9月24日
1000
用户投稿

如何在mysql中升级高可用集群

先确认版本兼容性、应用依赖及备份完整性，再按架构选择升级路径。对Group Replication或InnoDB Cluster采用滚动升级，先升从节点最后升主节点；MHA/Orchestrator架构先升备库再切换主库；PXC需停集群全量升级。替换二进制后启动实例并运行mysql_upgrade，…

程序猿
2026年9月24日
0000
用户投稿

PHP如何批量处理图片_PHP实现多张图片自动化处理

批量处理图片时需循环读取并逐个处理，核心是使用scandir()获取文件列表，通过GD库或Imagick处理图像，每处理完一张用imagedestroy()释放内存以避免内存溢出；为提升效率可分批处理、优化算法、使用多进程或异步队列，并选用Intervention Image等高效第三方库。批量处…

程序猿
2026年9月24日
1000
绝美后背！日本妹子cos《寂静岭f》深水雏子

《寂静岭f》女主角深水雏子近日在社交平台上引发热议，看似是普通的日本高中女生，实则性格果决、战斗力爆表。手持铁管正面硬刚女鬼的场面令人印象深刻，干脆利落的战斗风格让她迅速被玩家封神，成为《寂静岭》系列中最具冲击力的新角色之一。拥有30万粉丝的人气coser月海つくね（@XaiabP）也忍不住致敬这位…

程序猿
2026年9月24日 • 用户投稿
1000
用户投稿

减少PHP与MySQL数据库通信的延迟

减少php与mysql数据库通信的延迟可以通过以下策略：1. 优化数据库查询，使用索引提升查询速度；2. 减少数据库连接次数，使用连接池管理连接；3. 查询优化，使用explain分析查询计划；4. 使用缓存，如redis，减少数据库查询次数。这些方法能显著提升应用性能，但需权衡利弊，确保系统稳定性…

程序猿
2026年9月24日
0000