slideshow 相关问题

我正在尝试制作多个幻灯片以使用同一段 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 来创建所需数量的滑块。每个滑块都有自己的一组事件监听器，并且独立于其他滑块运行。

javascript css slider slideshow autoplay

回答 1 投票 0

幻灯片遮盖了其他分隔线

我基本上刚刚开始学习 html、css 和 js。我有一个问题已经困扰了我两天了...... 幻灯片遮盖了第一个分隔线，它不在预期的位置...

javascript html css slideshow

回答 1 投票 0

我可以为幻灯片 Javascript 实现暂停和恢复功能吗？

我正在播放 Javascript 幻灯片。我需要在我的幻灯片上实现一个暂停和恢复按钮，其中当我单击“暂停”按钮时幻灯片中的“暂停”，当我单击“恢复”按钮时，

javascript slideshow

回答 1 投票 0

幻灯片图像鼠标悬停下拉CSS

我制作了自动图像幻灯片。当我将鼠标悬停在幻灯片图像上时，我想制作一个下拉图像。我已经放置了下拉 css、html 代码，但它不起作用。有什么解决办法吗？ CSS...

html css image dropdown slideshow

回答 1 投票 0

有没有办法让我在bigcartel上使用luna模板在幻灯片上添加图像链接

我目前正在使用大型卡特尔网站模板中的 Luna 主题。我想知道是否有任何方法或编码可以用来使幻灯片上的图像可点击。我特别想要它...

javascript hyperlink slideshow bigcartel

回答 2 投票 0

WP Metaslider onclick 放大图像同屏

所以我使用 WP metaslider 进行幻灯片/图库显示。一切都很好用，除了单击滑块中的图像并在新窗口中打开其原始大小之外，我...

javascript css wordpress onclick slideshow

回答 1 投票 0

纯CSS滑块/轮播/带自动播放/动画和导航的幻灯片

有人可以告诉我是否可以仅使用 Html 和 CSS 将这两者合而为一？（通过自动播放、动画或任何其他可能的方式）这个问题似乎突然出现......

html css navigation slideshow autoplay

回答 1 投票 0

10 张图片 HTML 和 JavaScript 幻灯片未显示所有图片？

幻灯片中最多只能显示 4 张图片，上一个按钮的作用相同爪哇： imgArray = 新数组(10); imgArray[0] = 新图像； imgArray[0].src = "欧几里得.png"; imgArray[...

javascript html arrays image slideshow

回答 1 投票 0

jQuery - 循环帮助

我正在寻求一些有关使用 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>

jquery slideshow cycle

回答 0 投票 0

如何向我的 cb 幻灯片添加更多图像？

幻灯片适用于图像 1-6（原始代码），但我需要显示 13 张图像。这是我所做的，并认为它会起作用，但事实并非如此。它仍然只播放前 6 个图像。本来...

css slideshow

回答 2 投票 0

在幻灯片上使用上一个下一个按钮时重置计时器

我有一个图像幻灯片，它每 5 秒自动更改一次（ autoslide() ），所以当我按下下一个/后退按钮之一时，倒计时继续。我想要如何表现：当其中之一......

javascript slideshow

回答 1 投票 0

SlidesJS 隐藏分页

我正在使用 Slidesjs 在我的网站上使用简单的滚动条。但是，我无法隐藏显示 1 和 2 要点的分页。我尝试过将其隐藏在 CSS 和 Jquery.hide 函数中...