如何使用JavaScript淡入循环？

我正在尝试用JavaScript制作一个广告横幅（循环横幅）。我希望第一个图像有淡入淡出和其他不，似乎它与我的工作，但当第二个循环开始时（和下一个），第一个图像失去其淡入淡出效果。我的代码怎么了

函数displayAd2（）{
设置超时（（）=>{
元素=document.querySelector（“#ad#u container2”）；
element.style.backgroundImage=”http://via.placeholder.com/150)";
element.style.opacity=“1”；
element.style.transition=“2s缓进缓出”；
设置超时（（）=>{
元素=document.querySelector（“#ad#u container2”）；
element.style.backgroundImage=”http://via.placeholder.com/150";
element.style.opacity=“1”；
element.style.transition=“0s轻松进出”；
设置超时（（）=>{
元素=document.querySelector（“#ad#u container2”）；
element.style.backgroundImage=”http://via.placeholder.com/150";
element.style.opacity=“1”；
element.style.transition=“0s轻松进出”；
设置超时（（）=>{
displayAd2（）；
}, 2500);
}, 2000);
}, 100);
}, 100);
}
displayAd2（）
#bg2{
宽度：728px；
高度：90px；
边缘顶端：40px；
背景色：#0c74b9；
左边距：自动；
右边距：自动；
位置：相对位置；
}
#ad_集装箱2{
位置：绝对位置；
宽度：100%；
身高：100%；
左边距：自动；
右边距：自动；
不透明度：0；
}
好的，我想我已经按照你想要的方式工作了。首先，您不需要对
元素
进行多个赋值，因为它总是选择同一个元素。相反，您可以在函数外部选择它：

const element = document.querySelector("#ad_container2");

代码的其余部分还可以，但有2个问题（下面列出了A和B）：

A.
element.style.backgroundImage
的语法错误。使用
图像背景属性的URL，您需要将其包装为
“URL（此处的图像链接）”。因此，在您的情况下，您需要将其更改为：

element.style.backgroundImage = "url('http://via.placeholder.com/150')";

//Note the use of double quotation marks ("") for the outside string and single quotation marks ('') for the inside image-url.

B.设置超时时间已关闭

function displayAd2() {
  setTimeout(() => {

    element.style.backgroundImage = "http://via.placeholder.com/150)";
    element.style.opacity = "1";
    element.style.transition = "2s ease-in-out";
    setTimeout(() => {

      element.style.backgroundImage = "http://via.placeholder.com/150";
      element.style.opacity = "1";
      element.style.transition = "0s ease-in-out";
      setTimeout(() => {

        element.style.backgroundImage = "http://via.placeholder.com/150";
        element.style.opacity = "1";
        element.style.transition = "0s ease-in-out";
        setTimeout(() => {
          displayAd2();
        }, 2500); //FOURTH triggers 2500ms after THRID and the function runs again from FIRST
      }, 2000); //THIRD starts 2000ms after SECOND, this part is okay
    }, 100); // SECOND part of the function will also start 100ms after the FIRST 
//started, i.e. not giving enough time for the first transition of 2 seconds to take place
  }, 100); //FIRST, the initial function will start 100ms after pageload
}

另一个注意事项是使用不同的图像来更好地可视化正在发生的更改-在您的代码示例中，所有背景图像都是相同的，因此即使有转换，您也不会看到它发生！以下是我将如何设置它：

const element = document.querySelector("#ad_container2");
function displayAd2() {
  setTimeout(() => {

        element.style.transition = "2s ease-in-out";
    element.style.backgroundImage = "url('http://via.placeholder.com/250')";
    element.style.opacity = "1";

    setTimeout(() => {

      element.style.backgroundImage = "url('https://cdn.pixabay.com/photo/2017/0    8/30/01/05/milky-way-2695569_960_720.jpg')";
      element.style.opacity = "1";
      element.style.transition = "none";

      setTimeout(() => {

        element.style.transition = "none";
        element.style.backgroundImage = "url('http://via.placeholder.com/150')";
        element.style.opacity = "1";

        setTimeout(() => {
          displayAd2();
        }, 2000); //allow 2s for each image
      }, 2000);
    }, 2000);
  }, 0);
}

displayAd2();

看到它运行的JSfiddle链接：
可能会有帮助（css仅用于fadein out幻灯片放映解决方案）谢谢Damjan，答案很好，我得到了+-