为什么 jQuery Fading Effect 不能正常工作？

Question

我的网站上有一个幻灯片，我希望幻灯片的过渡具有淡化动画。 为此，我将 jQuery 与 fadeIn 和 fadeOut 命令一起使用。 我其实有两个问题：

1. 动画确实有效，但不正确； 当我单击下一张图像时，它具有正常的硬变化，然后新图像淡出并再次淡入，而不是一个淡出另一个淡入。为什么会这样，如何纠正？

2. 只有当我单击箭头时，图像才会淡入和淡出，而不是当幻灯片以 5 秒的间隔自动浏览图像时。 我尝试将效果与更改事件集成（当图像更改时应该出现动画），但这不起作用。 我是否必须使用另一个事件处理程序，还有其他方法吗？

我在谷歌上找不到任何对这些问题有帮助的东西，所以如果有人能帮我解决这个问题，我将非常感激，因为我对 JavaScript 也很陌生，并且需要它来完成大学项目。 谢谢！ :)

 var DiashowBilder = new Array("Bilder/1.jpeg", "Bilder/2.jpeg", "Bilder/3.jpeg", "Bilder/4.jpeg", "Bilder/5.jpeg", "Bilder/6.jpeg", "Bilder/7.jpeg", "Bilder/8.jpeg", "Bilder/9.jpeg", "Bilder/10.jpeg"); var index = 0; jQuery.noConflict(); jQuery(document).ready(function() { jQuery("#animation").click(function() { jQuery("#Vorschaubild").fadeOut(400, function() { diashow(); jQuery("#Vorschaubild").fadeIn(400); }); }) jQuery("#animation").change(function() { jQuery("#Vorschaubild").fadeOut(400, function() { diashow(); jQuery("#Vorschaubild").fadeIn(400); }); }) jQuery("#next").click(function() { jQuery("#Vorschaubild").fadeOut(400, function() { diashow(); jQuery("#Vorschaubild").fadeIn(400); }); }) jQuery("#previous").click(function() { jQuery("#Vorschaubild").fadeOut(400, function() { diashow(); jQuery("#Vorschaubild").fadeIn(400); }); }) }); function nextIMG(n) { diashow(index += n); document.getElementsByClassName("dot")[index].classList.add("active"); document.getElementsByClassName("dot")[index -n].classList.remove("active"); if (index == DiashowBilder.length) { index = 0; document.getElementsByClassName("dot")[10].classList.remove("active"); } if (index < 0) { index = DiashowBilder.length -1; } } function currentSlide(n) { diashow(index = n); dot[index].classList.add("active") } function diashow() { document.getElementById("Vorschaubild").src = DiashowBilder[index]; if (index == DiashowBilder.length) { index = 0; } if (index < 0) { index = DiashowBilder.length -1; } } diashow(); function automatischWeiterschalten() { nextIMG(1); } setInterval(automatischWeiterschalten, 5000);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <a class="prev" onclick="nextIMG(-1)" id="previous">&#10094;</a> <div id="animation"> <img id="Vorschaubild" /> <br/><br/> <div style="text-align:center"> <span class="dot" onclick="currentSlide(1)" id="dot1"></span> <span class="dot" onclick="currentSlide(2)" id="dot2"></span> <span class="dot" onclick="currentSlide(3)" id="dot3"></span> <span class="dot" onclick="currentSlide(4)" id="dot4"></span> <span class="dot" onclick="currentSlide(5)" id="dot5"></span> <span class="dot" onclick="currentSlide(6)" id="dot6"></span> <span class="dot" onclick="currentSlide(7)" id="dot7"></span> <span class="dot" onclick="currentSlide(8)" id="dot8"></span> <span class="dot" onclick="currentSlide(9)" id="dot9"></span> <span class="dot" onclick="currentSlide(10)" id="dot10"></span> </div> </div> <a class="next" onclick="nextIMG(1)" id="next">&#10095;</a>

Answer 1

您的代码无法按预期工作的主要原因是动画与 src 属性的更新完全无关。 更新必须在淡入淡出功能内进行，否则将永远无法同步并正常工作。

我稍微更新了您的代码并将动画移动到正确的位置。 （并使用实际显示的图像）代码仍然不是 100% 工作，但它可以让你继续你的开发。

要记住的事情：

• 如果你在索引 0 时返回会发生什么
• 如果在您手动启动的 800 毫秒转换期间触发间隔图像会发生什么情况（在这种情况下可以考虑停止间隔并在转换完成后重新启动它）
• 你为什么把你的逻辑拆分成 nextIMG 和 diashow。 淡出后删除"active" ，然后在淡入后添加新的"active"不是更好吗？

 var DiashowBilder = new Array("https://images.freeimages.com/images/large-previews/e4e/circulate-abstract-1562332.jpg", "https://images.freeimages.com/images/large-previews/4ea/abstract-building-1226559.jpg", "https://images.freeimages.com/images/large-previews/e4e/circulate-abstract-1562332.jpg", "https://images.freeimages.com/images/large-previews/5ae/summer-holiday-1188633.jpg"); var index = 0; jQuery.noConflict(); jQuery(document).ready(function() { jQuery("#animation").click(function() { nextIMG(1); }) jQuery("#next").click(function() { nextIMG(-1); }) jQuery("#previous").click(function() { nextIMG(1); }) }); function nextIMG(n) { diashow(index += n); document.getElementsByClassName("dot")[index].classList.add("active"); document.getElementsByClassName("dot")[index -n].classList.remove("active"); if (index == DiashowBilder.length) { index = 0; document.getElementsByClassName("dot")[10].classList.remove("active"); } if (index < 0) { index = DiashowBilder.length -1; } } function currentSlide(n) { diashow(index = n); dot[index].classList.add("active") } function diashow() { jQuery("#Vorschaubild").fadeOut(400, function() { document.getElementById("Vorschaubild").src = DiashowBilder[index]; if (index == DiashowBilder.length) { index = 0; } if (index < 0) { index = DiashowBilder.length -1; } jQuery("#Vorschaubild").fadeIn(400); }); } diashow(); function automatischWeiterschalten() { nextIMG(1); } setInterval(automatischWeiterschalten, 5000);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <a class="prev" onclick="nextIMG(-1)" id="previous">&#10094;</a> <div id="animation"> <img id="Vorschaubild" /> <br/><br/> <div style="text-align:center"> <span class="dot" onclick="currentSlide(1)" id="dot1"></span> <span class="dot" onclick="currentSlide(2)" id="dot2"></span> <span class="dot" onclick="currentSlide(3)" id="dot3"></span> <span class="dot" onclick="currentSlide(4)" id="dot4"></span> <span class="dot" onclick="currentSlide(5)" id="dot5"></span> <span class="dot" onclick="currentSlide(6)" id="dot6"></span> <span class="dot" onclick="currentSlide(7)" id="dot7"></span> <span class="dot" onclick="currentSlide(8)" id="dot8"></span> <span class="dot" onclick="currentSlide(9)" id="dot9"></span> <span class="dot" onclick="currentSlide(10)" id="dot10"></span> </div> </div> <a class="next" onclick="nextIMG(1)" id="next">&#10095;</a>