如何在 bootstrap carousel 上获取容器 div 以平滑调整大小而不是“跳转”到新大小
当您在引导轮播中浏览各种大小/高度的图像或视频资源时，我试图让容器 div 平滑地调整大小。 现在它“跳跃”以调整大小到n...
我是 Web 开发新手，正在学习使用 React 和 Tailwind。 我正在尝试按以下方式制作“关于我们”部分。 有两个组件：滑动...
幻灯片放映 - 图像未显示（HTML 和 CSS）[已关闭]
我正在尝试在我的网站中创建幻灯片，但图像未显示。出现幻灯片的按钮和箭头，但不出现图像。 HTML代码 我正在尝试在我的网站中创建幻灯片，但图像未显示。出现幻灯片的按钮和箭头，但不出现图像。 HTML 代码 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="app.css"> <meta charset="utf-8"> </head> <body> </div> <!-- Slideshow container --> <div class="slideshow-container"> <!-- Full-width images with number and caption text --> <div class="mySlides"> <div class="numbertext">1 / 3</div> <img src="etat.jpg"> <div class="text">Les aides</div> </div> <div class="mySlides"> <div class="numbertext">2 / 3</div> <img src="tips.jpeg"> <div class="text">Les Tips</div> </div> <div class="mySlides"> <div class="numbertext">3 / 3</div> <img src="bonsplans.jpg"> <div class="text">Les bons plans</div> </div> <!-- Next and previous buttons --> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> </div> <br> <!-- The dots/circles --> <div style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div> </body> </html> CSS代码 /* Slideshow container */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* Hide the images by default */ .mySlides { display: none; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); } /* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #717171; } /* Fading animation */ .fade { animation-name: fade; animation-duration: 1.5s; } @keyframes fade { from {opacity: .4} to {opacity: 1} } 我使用了 W3schools 的代码。它并不打算成为自动幻灯片，因此我没有包含 JavaScript。我想要的结果是一个简单的轮播，就像 W3schools 网站上展示的那样。 我确实验证了图像的名称和 html 标签的名称，以检查它们是否正确。不知道其余部分的 CSS 代码是否会干扰幻灯片。 尝试将所有图像添加到单独的文件夹中并在项目中使用它们并确保路径正确， 例如，如果您有一个公共文件夹，并且里面有资产文件夹，其中包含所有图像，则像 一样导入它们
我想制作缩略图滑块， 我留下链接作为示例： http://flexslider.woothemes.com/thumbnail-slider.html 我搜索了很多但找不到解决方案，有人可以帮忙吗？ 这是...
我正在努力调试这张幻灯片。除了这部分之外，我已经理解了所有内容： 对于 (i = 0; i < slides.length; i++) { slides[i].style.display = 'none'; } for (i = 0; i < dots....
请帮我让我的滑块自动移动。一切正常，唯一缺少的是让滑块自动移动。下面的代码是我的工作模板。请帮忙制作
我努力不来这里打扰你们，但我就是不知道将这些小幻灯片指示器合并到我的代码中。我已经看了太多教程，但无法弄清楚...
JS 中的幻灯片图像被放大到超出屏幕的参考范围。我正在尝试调整 SCSS 中的上述图像的大小以适合所有类型的屏幕。请耐心等待，因为我仍在学习......
如何将 PowerPoint 幻灯片打印恢复为 PDF 中的 A4 页，每页 2 张幻灯片？
我有一位老师在课堂上展示 PowerPoint 演示文稿，但在向我们发送文件时，他会执行“打印为 PDF”的操作，而不是自行上传幻灯片，而是...
如果幻灯片具有使用 glide.js 的链接，Tab 键会中断滑块
我有一个用 Glide.js 构建的滑块，有 6 张幻灯片，全部带有链接。它需要为我们的键盘用户提供选项卡选项，但到目前为止它还不起作用。 如果用户用 Tab 键浏览页面，页面就会停止...
我正在尝试为幻灯片之间的过渡设置动画，以使其看起来不那么突兀。据我了解的文档，幻灯片应该使用播放程序进行动画处理。然而，我有
我正在尝试制作多个幻灯片以使用同一段 JavaScript 代码。 这是我的 HTML 代码： 我正在尝试使用同一段 JavaScript 代码制作多个幻灯片。 这是我的 HTML 代码： <div class="slider-container"> <div class="slider"> <div class="slide">...</div> <div class="slide">...</div> <div class="slide">...</div> <div class="slide">...</div> </div> <div class="slider"> <div class="slide">...</div> <div class="slide">...</div> <div class="slide">...</div> <div class="slide">...</div> </div> </div> 这是主要的CSS： .slider-container{ width:50%; } .slider{ width:100%; position:relative; padding-bottom:75%; /* aspect-ratio 4/3 */ } .slide{ width:100%; position:absolute; top:0; left:0; opacity:0; transition:opacity 0.5s ease-in; } .slide:first-child{ opacity:1; } 这是 javascript : const sliderContainer = document.querySelector(".slider-container"); const slide = sliderContainer.querySelectorAll(".slide"); let currentSlide = 0; function changeSlide() { slide[currentSlide].style.opacity = 0; currentSlide = (currentSlide + 1) % slide.length; slide[currentSlide].style.opacity = 1; } function startSlider() { intervalId = setInterval(changeSlide, 2000); } function stopSlider() { clearInterval(intervalId); } startSlider(); sliderContainer.addEventListener("mouseenter", stopSlider); sliderContainer.addEventListener("mouseleave", startSlider); 此 JavaScript 对于一张幻灯片效果很好，但我无法在同一页面上显示多个幻灯片。理想情况下，我希望为所有幻灯片保留相同的类，并且显然使进入/离开鼠标事件对每个幻灯片单独工作。有什么帮助吗？ 要处理一个页面上具有独立行为的多个滑块，您需要调整 JS 代码以分别处理每个滑块。 实现此目的的一种方法是将每个滑块的功能封装在一个函数中，然后为每个滑块创建实例。 这是您的代码： html: <div class="slider-container"> <div class="slider" id="slider1"> <div class="slide">...</div> <div class="slide">...</div> <div class="slide">...</div> <div class="slide">...</div> </div> <div class="slider" id="slider2"> <div class="slide">...</div> <div class="slide">...</div> <div class="slide">...</div> <div class="slide">...</div> </div> </div> javascript: function createSlider(sliderId) { const sliderContainer = document.getElementById(sliderId); const slides = sliderContainer.querySelectorAll(".slide"); let currentSlide = 0; let intervalId; function changeSlide() { slides[currentSlide].style.opacity = 0; currentSlide = (currentSlide + 1) % slides.length; slides[currentSlide].style.opacity = 1; } function startSlider() { intervalId = setInterval(changeSlide, 2000); } function stopSlider() { clearInterval(intervalId); } startSlider(); sliderContainer.addEventListener("mouseenter", stopSlider); sliderContainer.addEventListener("mouseleave", startSlider); } // Create instances for each slider createSlider("slider1"); createSlider("slider2"); 代码更改： createSlider函数采用sliderId参数，该参数将用于识别每个滑块容器。 在函数内部，我使用 document.getElementById 根据提供的 sliderId 查找特定的滑块容器。 其余逻辑封装在函数内，确保每个滑块独立运行。 因此，您可以通过使用不同的 createSlider 值调用 sliderId 来创建所需数量的滑块。每个滑块都有自己的一组事件监听器，并且独立于其他滑块运行。
我基本上刚刚开始学习 html、css 和 js。我有一个问题已经困扰了我两天了...... 幻灯片遮盖了第一个分隔线，它不在预期的位置...
我可以为幻灯片 Javascript 实现暂停和恢复功能吗？
我正在播放 Javascript 幻灯片。我需要在我的幻灯片上实现一个暂停和恢复按钮，其中当我单击“暂停”按钮时幻灯片中的“暂停”，当我单击“恢复”按钮时，
我制作了自动图像幻灯片。 当我将鼠标悬停在幻灯片图像上时，我想制作一个下拉图像。 我已经放置了下拉 css、html 代码，但它不起作用。有什么解决办法吗？ CSS...
有没有办法让我在bigcartel上使用luna模板在幻灯片上添加图像链接
我目前正在使用大型卡特尔网站模板中的 Luna 主题。我想知道是否有任何方法或编码可以用来使幻灯片上的图像可点击。我特别想要它...
所以我使用 WP metaslider 进行幻灯片/图库显示。一切都很好用，除了单击滑块中的图像并在新窗口中打开其原始大小之外，我...
有人可以告诉我是否可以仅使用 Html 和 CSS 将这两者合而为一？ （通过自动播放、动画或任何其他可能的方式）这个问题似乎突然出现......
10 张图片 HTML 和 JavaScript 幻灯片未显示所有图片？
幻灯片中最多只能显示 4 张图片，上一个按钮的作用相同 爪哇： imgArray = 新数组(10); imgArray[0] = 新图像； imgArray[0].src = "欧几里得.png"; imgArray[...
我正在寻求一些有关使用 jQuery 循环库的帮助。我正在参加初学者演示，并且我完成了绝对的第一个演示。这是页面上的第二个。 <p>我正在寻求有关使用 jQuery 的 <a href="http://malsup.com/jquery/cycle/" rel="nofollow noreferrer">cycle</a> 库的帮助。我正在参加“初学者”演示，并且我完成了绝对的第一个演示。这是页面上的第二个。<a href="http://malsup.com/jquery/cycle/begin.html" rel="nofollow noreferrer"> </a><code><script src="jquery-1.2.6.min.js" type="text/javascript"></script> <script src="jquery.cycle.all.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('.pics').cycle({ fx: 'scrollDown', speed: 300, timeout: 2000 }); </script> </code></p> <pre>我的 CSS 与页面上的 CSS 相同，这就是为什么我将 .pics 放在引号中。</pre> <p> </p> </question>我猜测这对你不起作用。您需要平衡大括号和圆括号。<answer tick="false" vote="2"> <p>试试这个：</p> <p><code>$(document).ready(function() { $('.pics').cycle({ fx: 'scrollDown', speed: 300, timeout: 2000 }); }); </code></p> <pre> </pre> </answer>可以重新提出这个问题吗？它工作正常，但我在设计它时遇到了困难。我试图让图像向左浮动，文本向右环绕，就像在 <answer tick="false" vote="0">demo<p>（非图像内容）中一样。<a href="http://malsup.com/jquery/cycle/int2.html" rel="nofollow noreferrer"> </a>我的脚本是：</p> <p><code><script type="text/javascript"> $(document).ready(function() { $('.text') .before('<div id="slidenav">') .cycle({ fx: 'fade', speed: 'slow', timeout: 6000, pager: '#slidenav', pause: 1 }); }); </script> </code></p> <pre>...</pre> <p><code><div id="featured"> <div class="text"> <txp:article_custom form="slidetext" section="slide" limit="5" /> </div> </div> </code></p> <pre>我的 CSS 是：</pre> <p><code>.text { width: 600px; height: 200px; border: 1px solid #ddd; background-color: green; } .text div { width: 500px; height: 200px; padding: 15px; color: #333; text-align: left; font-size: 16px; background-color:red; } .text div img {width: 200px; height: 200px; padding: 3px; background: orange } .text div p{ background-color:black;} </code></p> <pre>抱歉，这里没有浮动属性，因为它们都不起作用。我从 jQuery 循环演示页面中获取了该 CSS。</pre> <p>结果是</p> <p></p>http://img147.imageshack.us/img147/4434/jqueryhelpdl5.jpg http://img147.imageshack.us/img147/4434/jqueryhelpdl5.jpg<p><a href="http://img147.imageshack.us/img147/4434/jqueryhelpdl5.jpg" rel="nofollow noreferrer"> </a></p>http://img147.imageshack.us/img147/4434/jqueryhelpdl5.jpg<p><a href="http://img147.imageshack.us/img147/4434/jqueryhelpdl5.jpg" rel="nofollow noreferrer"> </a> </p></answer>