javascript - 交叉淡入淡出效果无法正常工作

Question

我复制了this code来自 codepen.io，为我网站的背景图片添加交叉淡入淡出效果。

var bgImageArray = ["lonely.jpg", "uluwatu.jpg", "carezza-lake.jpg", "batu-bolong-temple.jpg"],
base = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/full-",
secs = 4;
bgImageArray.forEach(function(img){
    new Image().src = base + img; 
    // caches images, avoiding white flash between background replacements
});

function backgroundSequence() {
	window.clearTimeout();
	var k = 0;
	for (i = 0; i < bgImageArray.length; i++) {
		setTimeout(function(){ 
			document.documentElement.style.background = "url(" + base + bgImageArray[k] + ") no-repeat center center fixed";
			document.documentElement.style.backgroundSize ="cover";
		if ((k + 1) === bgImageArray.length) { setTimeout(function() { backgroundSequence() }, (secs * 1000))} else { k++; }			
		}, (secs * 1000) * i)	
	}
}
backgroundSequence();

* { 
  box-sizing: border-box; 
}
html {
  margin: 0;
  background-size: cover;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/full-lonely.jpg") no-repeat center center fixed;
  background-blend-mode: darken;
  // blend mode optional at this stage; will be used more in the next demo.
  transition: 3s;
}
body { margin: 0; }
div#texttop { 
	color: #fff;
	width: 30%;
	margin-top: 5%;
	margin-left: 5%;
	padding: 2rem;
	border: 4px double rgba(255,255,255,0.3);
	background: rgba(0,0,0,0.3);
	font-family: Oxygen, sans-serif;
h1 { 
  margin-top: 0; 
  text-align: center;
  font-weight: 100;
}
p { 
   line-height: 1.6; 
  }
}
@media all and (max-width: 770px) {
	div#texttop { display: none; }
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="texttop">
		<h1>True Cross-Fade Background Images</h1>
		<p>A repeating sequence of fullscreen background images, pushed all the way to the root element. Crossfading effect in Webkit-derived browsers (Chrome, Safari, Opera).</p>
	</div>

图像循环正常，但它们没有进行交叉淡入淡出过渡，它们只是在没有交叉淡入淡出效果的情况下发生变化。图像周期之间偶尔会出现白色闪烁。

我已经在此处插入了一段代码，但它仍然无法正常工作。也许缺少一些我找不到的东西？

Answer 1

codepen.io 正在使用 scss你应该复制编译后的 css，

var bgImageArray = ["lonely.jpg", "uluwatu.jpg", "carezza-lake.jpg", "batu-bolong-temple.jpg"],
base = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/full-",
secs = 4;
bgImageArray.forEach(function(img){
    new Image().src = base + img; 
    // caches images, avoiding white flash between background replacements
});

function backgroundSequence() {
	window.clearTimeout();
	var k = 0;
	for (i = 0; i < bgImageArray.length; i++) {
		setTimeout(function(){ 
			document.documentElement.style.background = "url(" + base + bgImageArray[k] + ") no-repeat center center fixed";
			document.documentElement.style.backgroundSize ="cover";
		if ((k + 1) === bgImageArray.length) { setTimeout(function() { backgroundSequence() }, (secs * 1000))} else { k++; }			
		}, (secs * 1000) * i)	
	}
}
backgroundSequence();

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  margin: 0;
  background-size: cover;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/full-lonely.jpg") no-repeat center center fixed;
  background-blend-mode: darken;
  -webkit-transition: 3s;
  transition: 3s;
}

body {
  margin: 0;
}

div#texttop {
  color: #fff;
  width: 30%;
  margin-top: 5%;
  margin-left: 5%;
  padding: 2rem;
  border: 4px double rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.3);
  font-family: Oxygen, sans-serif;
}
div#texttop h1 {
  margin-top: 0;
  text-align: center;
  font-weight: 100;
}
div#texttop p {
  line-height: 1.6;
}

@media all and (max-width: 770px) {
  div#texttop {
    display: none;
  }
}

<div id="texttop">
		<h1>True Cross-Fade Background Images</h1>
		<p>A repeating sequence of fullscreen background images, pushed all the way to the root element. Crossfading effect in Webkit-derived browsers (Chrome, Safari, Opera).</p>
	</div>