随机展示轮播图中的指定数量的 Slides-js教程-PHP中文网

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

碧海醫心

发布： 2025-08-06 20:02:12

原创

1059人浏览过

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

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

实现步骤

HTML 结构调整

确保 HTML 结构包含一个容器元素（例如 <div>）包裹所有的 slide 元素（例如 <div> 或 <li>）。每个 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)))
}

登录后复制

代码解释：

Figma Slides

Figma Slides 是 Figma 发布的PPT制作和演示文稿生成工具，可以帮助创建、设计、定制和分享演示文稿

查看详情

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>

登录后复制

注意事项：