如何使用javascript（僅）對圖像滑塊進行簡單的淡入淡出效果？

Question

我正在使用以下代碼來運行滑塊。 該功能運行良好。 如何使用js進行簡單的淡入效果。 沒有jQuery。 setInterval還需要等待5秒鍾才能顯示第一張圖像。 如何從圖像開始，然后以5秒間隔繼續？

  var i = 0; var hello = function(){ if(i<image.length) {document.getElementById('fullscreenImage').src = image[i]; i+=1; } else i = 0; } setInterval(hello,5000);

 #fullscreenImage { z-index: -999; width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-size: cover; }

 <img id="fullscreenImage"></img>

Answer 1

您可以通過逐步調整圖像的不透明度樣式屬性來實現。 這是一個簡單的示例：聲明一些HTML結構，然后使用makeSlider（）函數連接滑動行為，傳遞一個包含目標圖像以及衰落參數的數組。

HTML文件示例（whatever.html）：

<head>
  <style type="text/css">
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 300px;
      visibility: hidden;
    }
    img:first-child {
      visibility: visible;
    }
  </style>
  <script type="text/javascript" src="slider.js"></script>
</head>

<body>
  <img src="1.jpg" alt="Alt 1" />
  <img src="2.jpg" alt="Alt 2" />
  <script type="text/javascript">
    var fadeInterval = 3000;
    var fadeStep = 20;
    setTimeout(function() {
      makeSlider([document.images[0], document.images[1]], fadeInterval, fadeStep); 
    }, fadeInterval);
  </script>
</body>

JavaScript文件（slider.js）：

function makeSlider(pictures, fadeInterval, fadeStep) {
  var currentIndex = 0;

  function show() {
    var nextIndex = (currentIndex + 1) % pictures.length;
    var current = pictures[currentIndex];
    var next = pictures[nextIndex];
    fade(current, 1, -0.1, function() {
      current.style.visibility = "hidden";
      next.style.visibility = "visible";
      fade(next, 0, +0.1, function() {
        currentIndex = nextIndex;
        setTimeout(function() { show(); }, fadeInterval);
      });
    }); 
  }

  function fade(element, origin, step, continuation) {
    element.style.opacity = origin;
    setTimeout(function () {
      var nextOrigin = Math.round((origin + step) * 10) / 10;    
      if (nextOrigin >= 0 && nextOrigin <= 1) {
        fade(element, nextOrigin, step, continuation);
      } else {
        continuation();
      }
    }, fadeStep);
  }

  show();
}

HTH。

如何使用javascript（僅）對圖像滑塊進行簡單的淡入淡出效果？

問題描述

1 個解決方案

解決方案1
0 2015-02-01 20:57:40

如何使用javascript（僅）對圖像滑塊進行簡單的淡入淡出效果？

問題描述

1 個解決方案

解決方案1 0 2015-02-01 20:57:40

解決方案1
0 2015-02-01 20:57:40