本文旨在提供一种使用 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 的功能。
Random Slides <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>
注意事项：
- 确保 CSS 样式在 JavaScript 代码执行之前加载，否则可能出现样式闪烁的问题。
- 可以根据实际需求修改随机选择的 slide 数量。
- 如果需要支持动态添加或删除 slide 元素，需要重新执行 JavaScript 代码，更新显示的 slide 元素。
总结
通过本文的介绍，您已经掌握了如何使用 JavaScript 从轮播图中随机选择并显示指定数量 slides 的方法。 这种方法可以应用于各种场景，例如展示随机推荐内容、突出显示特定主题等。 通过灵活运用这些技术，可以为用户提供更加个性化和动态的体验。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
