使用 JS 自动更改 bg (css)（并缓慢过渡）

Question

我有一个 div（我的旋转木马的项目之一），其内联样式输入 .jpg 作为 bg img。我想在 3 秒内自动将那个 bg 更改为另一个，而不是维护第二个。问题是，使用我已有的代码，我可以更改 bg，但我不知道如何使用 getElementById 后跟样式来创建平滑过渡。我试过css3，但是IE没有显示效果。这是我的 js:

<script>
  $('#myCarousel').carousel({
    interval: 3000,
    cycle: true
  });

  function show_banner(){

  document.getElementById('mainImage').style.backgroundImage="url('images/slider/bg1.jpg')";

  }

  setTimeout(show_banner, 500);

</script>

这是HTML:

<div id="mainImage" class="item active" data-interval="9000"  style="background: url(images/slider/bg0.jpg)">

我知道我的代码很乱。我也想请你们告诉我一个更好的组织方式。

P.S.: 如果我已经在 js 中设置了一个间隔 (3000)，你可能会问我为什么要使用数据间隔。如果我不设置这两个数字，我就无法使间隔工作。我最终得到了一个不太令人满意的结果：/

感谢大家的支持！谢谢！

Answer 1

从一个 background-image 平滑过渡到另一个的一种方法是将透明 ::after pseudo-element 直接放置在原始元素的顶部。

然后，当javascript更新原始元素的classList时，::afterpseudo-element的不透明度可以平滑地从完全透明过渡到完全不透明。

参见下面的示例：

function newBackground() {
 var mainImage = document.getElementById('mainImage');
    setTimeout(function(){
     mainImage.classList.add('showNewBackground');}, 
 3000);
}

window.addEventListener('load',newBackground,false);

div {
position: relative;
width: 160px;
height: 160px;
}

div::after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 160px;
height: 160px;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAIAAAAiOjnJAAAAFXRFWHRDcmVhdGlvbiBUaW1lAAfgAQgQOAWMlrgJAAAAB3RJTUUH4AEIEDkYI4oG4QAAAAlwSFlzAAAOwwAADsMBx2+oZAAAAhFJREFUeNrt0kEJACAAwEC1f2ct4RDkLsEem3vAfet1AH8yFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5E4ij0Cj28sYHwAAAAASUVORK5CYII=');
opacity: 0;
transition: all 1.5s ease-in-out;
}

div.showNewBackground::after {
opacity: 1;
}

<div id="mainImage" style="background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAIAAAAiOjnJAAAAFXRFWHRDcmVhdGlvbiBUaW1lAAfgAQgQOAWMlrgJAAAAB3RJTUUH4AEIEDkoBVM2TQAAAAlwSFlzAAAOwwAADsMBx2+oZAAAAhRJREFUeNrt0sENwCAQwLCD/XdulyBCQvYEeWTNfAOn7dsBvMlYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMReIHiD8Cjx+RsOsAAAAASUVORK5CYII=');">
</div>

N.B. 不要特别注意示例中的 base-64 图像 - 我只是将它们包括在内以演示效果。您可以用自己的图片替换这些图片中的每一个。

使用 JS 自动更改 bg (css)（并缓慢过渡）

Change bg (css) automatically using JS (and a slowly transition)

javascript

css

smooth

background-image

getelementbyid