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

随机显示指定数量的轮播图幻灯片

2025-08-20 10:36:28 0浏览收藏

本文旨在提供一种解决方案，用于在网页加载时从一组幻灯片中随机选择并显示指定数量的轮播图幻灯片，同时隐藏未被选中的幻灯片。通过使用JavaScript和CSS，可以实现动态地展示幻灯片内容，提升用户体验。文章将提供详细的代码示例和步骤说明，帮助开发者快速实现该功能。**如何实现随机轮播图？** 本文将详细讲解使用HTML、CSS和JavaScript代码，轻松实现网页上指定数量幻灯片的随机展示。通过学习本文，您将掌握动态展示轮播图幻灯片的关键技术，提升网站用户体验。本文提供完整代码示例和注意事项，助您快速上手，打造个性化网页展示效果。

随机显示轮播图中的指定数量幻灯片

第一段引用上面的摘要：

本文旨在提供一种解决方案，用于在网页加载时从一组幻灯片中随机选择并显示指定数量的幻灯片，同时隐藏未被选中的幻灯片。通过使用JavaScript和CSS，可以实现动态地展示幻灯片内容，提升用户体验。文章将提供详细的代码示例和步骤说明，帮助开发者快速实现该功能。

实现步骤

HTML 结构准备：

首先，确保你的 HTML 结构中包含包含所有幻灯片的容器，以及每个幻灯片的元素（例如 div）。每个幻灯片都应该有一个唯一的类名，例如 slogan。

<div class="container">
  <section id="testim" class="testim">
    <div class="testim-cover">
      <div class="wrap">
        <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 样式定义：

默认情况下，隐藏所有幻灯片。然后，创建一个 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 < 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() 方法可以根据第二个参数的布尔值来添加或移除指定的类名。

完整示例

<!DOCTYPE html>
<html>
<head>
  <title>随机幻灯片</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">
        <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>