当前位置：首页 > 文章列表 > 文章 > 前端 > 随机展示指定数量的轮播图Slides

随机展示指定数量的轮播图Slides

2025-08-29 16:00:44 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

想让你的轮播图更具吸引力吗？本文教你如何使用 JavaScript 实现**轮播图随机展示**指定数量的 Slides。告别千篇一律的展示方式，让每次页面加载都呈现不同的精彩内容。本文将详细讲解 HTML 结构调整、CSS 样式设置以及 JavaScript 代码实现，包括如何随机选择 Slides 并控制其显示与隐藏。通过学习本文，你将轻松掌握**JavaScript 轮播图**的实用技巧，打造更具个性化和动态化的用户体验，有效提升网站互动性，让用户眼前一亮！

随机展示轮播图中的指定数量的 Slides

本文旨在提供一种使用 JavaScript 从轮播图中随机选择并显示指定数量 slides 的方法。通过修改 HTML 结构和添加 CSS 样式，并结合 JavaScript 代码，可以实现每次页面加载时，轮播图随机展示预设数量 slides 的效果，而其余 slides 则会被隐藏。本文将提供详细的代码示例和步骤说明，帮助开发者轻松实现这一功能。

实现步骤

HTML 结构调整

确保 HTML 结构包含一个容器元素（例如

）包裹所有的 slide 元素（例如

或

）。每个 slide 元素都应该有一个唯一的类名（例如 slogan）。

<div class="container">
  <section id="testim" class="testim">
    <div class="testim-cover">
      <div class="wrap">

        <span id="right-arrow" class="arrow right fa fa-chevron-right"></span>
        <span id="left-arrow" class="arrow left fa fa-chevron-left "></span>
        <ul id="testim-dots" class="dots">
          <li class="dot active"></li>
          <!--
                    -->
          <li class="dot"></li>
          <!--
                    -->
          <li class="dot"></li>
          <!--
                    -->
          <li class="dot"></li>
          <!--
                    -->
          <li class="dot"></li>
        </ul>
        <div id="testim-content" class="cont">

          <div class="slogan">
            <p>"How does visual identity design help business/product value grow?"</p>
            <h2>MINE</h2>
          </div>

          <div class="slogan">
            <p>"How can we analyze ourselves, audience, competitors, and market and help business progress/grow?"</p>
            <h2>MINE</h2>
          </div>

          <div class="slogan">
            <p>"How can I differentiate my business from others?"</p>
            <h2>MINE</h2>
          </div>

          <div class="slogan">
            <p>"What is the best and latest business model and plan for me?"</p>
            <h2>MINE</h2>
          </div>

          <div class="slogan">
            <p>"How will innovative targeting be achieved at each stage of business?"</p>
            <h2>MINE</h2>
          </div>

        </div>

      </div>
    </div>
  </section>
</div>

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 的功能。

<!DOCTYPE html>
<html>
<head>
<title>Random Slides</title>
<style>
.slogan {
  display: none;
}

.slogan.show {
  display: block;
}
</style>
</head>
<body>

<div class="container">
  <section id="testim" class="testim">
    <div class="testim-cover">
      <div class="wrap">

        <span id="right-arrow" class="arrow right fa fa-chevron-right"></span>
        <span id="left-arrow" class="arrow left fa fa-chevron-left "></span>
        <ul id="testim-dots" class="dots">
          <li class="dot active"></li>
          <!--
                    -->
          <li class="dot"></li>
          <!--
                    -->
          <li class="dot"></li>
          <!--
                    -->
          <li class="dot"></li>
          <!--
                    -->
          <li class="dot"></li>
        </ul>
        <div id="testim-content" class="cont">

          <div class="slogan">
            <p>"How does visual identity design help business/product value grow?"</p>
            <h2>MINE</h2>
          </div>

          <div class="slogan">
            <p>"How can we analyze ourselves, audience, competitors, and market and help business progress/grow?"</p>
            <h2>MINE</h2>
          </div>

          <div class="slogan">
            <p>"How can I differentiate my business from others?"</p>
            <h2>MINE</h2>
          </div>

          <div class="slogan">
            <p>"What is the best and latest business model and plan for me?"</p>
            <h2>MINE</h2>
          </div>

          <div class="slogan">
            <p>"How will innovative targeting be achieved at each stage of business?"</p>
            <h2>MINE</h2>
          </div>

        </div>

      </div>
    </div>
  </section>
</div>

<script>
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)))
}
</script>

</body>
</html>

注意事项：

确保 CSS 样式在 JavaScript 代码执行之前加载，否则可能出现样式闪烁的问题。
可以根据实际需求修改随机选择的 slide 数量。
如果需要支持动态添加或删除 slide 元素，需要重新执行 JavaScript 代码，更新显示的 slide 元素。

总结

通过本文的介绍，您已经掌握了如何使用 JavaScript 从轮播图中随机选择并显示指定数量 slides 的方法。这种方法可以应用于各种场景，例如展示随机推荐内容、突出显示特定主题等。通过灵活运用这些技术，可以为用户提供更加个性化和动态的体验。

今天关于《随机展示指定数量的轮播图Slides》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！

Python嵌套列表字典怎么访问

上一篇: Python嵌套列表字典怎么访问

下一篇: 绘蛙AI修图教程：封面制作与变现攻略

查看更多

最新文章

文章 · 前端 | 2小时前 | 搜索引擎 SEO 用户体验 HTML语义化结构化标签

HTML语义化对SEO的影响及排名原理解析

220浏览收藏
文章 · 前端 | 2小时前 |

HTML目录栏制作方法：锚点导航树形菜单教程

102浏览收藏
文章 · 前端 | 2小时前 |

CSS背景图自适应容器填充技巧

420浏览收藏
文章 · 前端 | 2小时前 | 属性选择器 CSS选择器元素选择器 input type属性

input[type="text"]选择器的作用及使用方法

498浏览收藏
文章 · 前端 | 2小时前 |

MongoDB日期查询方法与注意事项

278浏览收藏
文章 · 前端 | 2小时前 |

CSSFlex与MediaQuery响应式实战指南

156浏览收藏
文章 · 前端 | 2小时前 |

CSRF原理与令牌添加详解

225浏览收藏
文章 · 前端 | 2小时前 |

Flexbox居中间距技巧：gap属性详解

250浏览收藏
文章 · 前端 | 2小时前 |

Set与Map算法选择优化指南

446浏览收藏
文章 · 前端 | 2小时前 | 样式控制 CSS伪类动态内容唯一子元素 :only-child

CSSonly-child选择器使用方法

228浏览收藏
文章 · 前端 | 2小时前 |

UTC时间转换技巧与时区处理方法

360浏览收藏
文章 · 前端 | 2小时前 |

回溯法解八皇后问题全解析

165浏览收藏

查看更多

课程推荐

前端进阶之JavaScript设计模式

设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。

543次学习
GO语言核心编程课程

本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。

516次学习
简单聊聊mysql8与网络通信

如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让

500次学习
JavaScript正则表达式基础与实战

在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。

487次学习
从零制作响应式网站—Grid布局

本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。

485次学习

查看更多

AI推荐

ChatExcel酷表

ChatExcel酷表是由北京大学团队打造的Excel聊天机器人，用自然语言操控表格，简化数据处理，告别繁琐操作，提升工作效率！适用于学生、上班族及政府人员。

3204次使用
Any绘本

探索Any绘本（anypicturebook.com/zh），一款开源免费的AI绘本创作工具，基于Google Gemini与Flux AI模型，让您轻松创作个性化绘本。适用于家庭、教育、创作等多种场景，零门槛，高自由度，技术透明，本地可控。

3416次使用
可赞AI

可赞AI，AI驱动的办公可视化智能工具，助您轻松实现文本与可视化元素高效转化。无论是智能文档生成、多格式文本解析，还是一键生成专业图表、脑图、知识卡片，可赞AI都能让信息处理更清晰高效。覆盖数据汇报、会议纪要、内容营销等全场景，大幅提升办公效率，降低专业门槛，是您提升工作效率的得力助手。

3446次使用
星月写作

星月写作是国内首款聚焦中文网络小说创作的AI辅助工具，解决网文作者从构思到变现的全流程痛点。AI扫榜、专属模板、全链路适配，助力新人快速上手，资深作者效率倍增。

4555次使用
MagicLight

MagicLight.ai是全球首款叙事驱动型AI动画视频创作平台，专注于解决从故事想法到完整动画的全流程痛点。它通过自研AI模型，保障角色、风格、场景高度一致性，让零动画经验者也能高效产出专业级叙事内容。广泛适用于独立创作者、动画工作室、教育机构及企业营销，助您轻松实现创意落地与商业化。

3824次使用