Question

尝试在循环中使用淡入淡出效果更改div类，有人可以帮我这个吗？

我只是希望它们在循环中每1秒自动更改淡出。

我的div

＆＃13;

.jumbotron {
	background-image: url('http://r6siegepro.pl/headerbgdark.png');
	background-color: #fff;
	background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 100%;
    width: 100%;
}
.jumbotron2 {
	background-image: url('http://r6siegepro.pl/headerbgdark2.png');
	background-color: #fff;
	background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 100%;
    width: 100%;
}
h1 {
  height: 100%;
}

＆＃13;

      <div class="jumbotron">
      <div class="container">
      <h1>SOME SAMPLE TEXT TO FILL EMPTY SPACE</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
      </div>
      </div>

＆＃13;

Answer 1

如果您只想更改背景图片，请不要更改课程：

var swtich_bg = document.querySelectorAll('.jumbotron')[0];
var switch_bg_toggle; 

setInterval(function(){
  if ( switch_bg_toggle ) {
    swtich_bg.style.backgroundImage = "url('http://r6siegepro.pl/headerbgdark.png')";
    switch_bg_toggle = false;
  } else {
    swtich_bg.style.backgroundImage = "url('http://r6siegepro.pl/headerbgdark2.png')";
    switch_bg_toggle = true;
  }
}, 1000);

只需在CSS中添加转换：

.jumbotron {
    background-image: url('http://r6siegepro.pl/headerbgdark.png');
    background-color: #fff;
    background-size: cover;
    transition: background-image .5s linear;
}

这里有JSBin：https://jsbin.com/mafimonoce/edit?html,output

顺便说一下。不要设置1秒钟，使用3秒左右的过渡时间间隔~10秒。

用JS改变div的背景img

1 个答案: