將此 Jquery 函數重寫為純 Javascript

Question

我在用 Javascript 重寫這個幻燈片功能時遇到了一些問題。 由於一些項目限制，我不得不恢復到純 JS。

$(".fadein img:gt(0)").hide();
  setInterval(function() {
    $(".fadein :eq(0)").fadeOut(2000)
      .next().fadeIn(1000)
      .end().appendTo('.fadein');
  }, 240000)

Answer 1

這是您的良好開端。

看一看： 如何使用 JavaScript 和 CSS 進行淡入淡出

並請提供一個最小的可重復示例

 let fadeInImgElements = document.querySelectorAll('.fadein>img:not(:first-child)'); let fadeInElement = document.querySelector('.fadein:first-child'); const fadeOut = function(element, interval) { var op = 1; // initial opacity var timer = setInterval(function() { if (op <= 0.1) { clearInterval(timer); element.style.display = 'none'; } element.style.opacity = op; element.style.filter = 'alpha(opacity=' + op * 100 + ")"; op -= op * 0.1; }, interval); } const fadeIn = function(element, interval) { var op = 0.1; // initial opacity element.style.display = 'block'; var timer = setInterval(function() { if (op >= 1) { clearInterval(timer); } element.style.opacity = op; element.style.filter = 'alpha(opacity=' + op * 100 + ")"; op += op * 0.1; }, interval); } fadeInImgElements.forEach(function(img) { img.style.display = "none"; }) setInterval(function() { fadeOut(fadeInElement, 50); fadeIn(fadeInElement.nextElementSibling, 50); document.querySelector('.fadein').appendChild(fadeInElement.nextElementSibling); }, 1000)

 <div class="fadein"> <img alt='fadeInImg' src="https://png.pngtree.com/png-vector/20190406/ourmid/pngtree-img-file-document-icon-png-image_919866.jpg"> <img alt='fadeInImg' src="https://png.pngtree.com/png-vector/20190406/ourmid/pngtree-img-file-document-icon-png-image_919866.jpg"> </div>