第一段引用上面的摘要：
本文旨在提供一种解决方案，用于在网页加载时从一组幻灯片中随机选择并显示指定数量的幻灯片，同时隐藏未被选中的幻灯片。通过使用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() 方法可以根据第二个参数的布尔值来添加或移除指定的类名。
完整示例
随机幻灯片 <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>
注意事项
- 确保 JavaScript 代码在 DOM 加载完成后执行。可以将代码放在
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
