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 个答案: