我如何將fadeOut或fadeIn影片添加到我的JS函式中-有解無憂

我的目標是將fadeIn 或fadeOut 影片添加到名為changePicture() 的函式中。我遇到的問題是我不知道如何在每次運行一個陣列后添加影片。例如：images[0] 運行并且我希望影片在它之后運行，因為在另一個影像出現之前我被排除在線性漸變顏色（這是某種灰色）之外，它看起來很可怕。任何幫助或提示將不勝感激！

let i = 0;
let images = [];
let slideTime = 3000;

images[0] = 'images/banner-bg.jpg'
images[1] = 'images/banner-bg2.jpg'
images[2] = 'images/banner-bg3.jpg'
images[3] = 'images/banner-bg4.jpg'
images[4] = 'images/banner-bg5.jpg'

function changePicture(){
    document.getElementById('banner').style.backgroundImage = "linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),url("   images[i]   ")";

    if (i < images.length - 1) {
        i  ;
    } else {
        i = 0;
    }
    setTimeout(changePicture, slideTime);
}
window.onload = changePicture;

uj5u.com熱心網友回復：

您可以通過更改橫幅元素的不透明度來實作此效果。

let i = 0;
let images = [];
let slideTime = 3000;
let animating = null;
let animationInterval = 100;
let pointer = 1;

images[0] = 'images/banner-bg.jpg'
images[1] = 'images/banner-bg2.jpg'
images[2] = 'images/banner-bg3.jpg'
images[3] = 'images/banner-bg4.jpg'
images[4] = 'images/banner-bg5.jpg'

function fadeout(element, time) {
  element.style.opacity = 1 - time / slideTime;
  // for fadein effect ->
  // element.style.opacity = time / slideTime;
}

function changePicture() {
  const banner = document.getElementById('banner');

  if (animating) {
    clearInterval(animating);
    animating = null;
    pointer = 1;
    banner.style.opacity = 1;
  }

  banner.style.backgroundImage = "linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),url("   images[i]   ")";

  const runAnimation = () => {
    fadeout(banner, pointer * animationInterval);
    pointer  ;
  }

  animating = setInterval(runAnimation, animationInterval);

  if (i < images.length - 1) {
    i  ;
  } else {
    i = 0;
  }
  setTimeout(changePicture, slideTime);
}

window.onload = changePicture;

希望這對你有用??。

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/346567.html

標籤：javascript css

上一篇：cssspan標簽高度排序

下一篇：如果我縮小視窗而不是在移動設備上，為什么我的斷點有效？