所以我正在制作一个小幻灯片脚本。问题是在一个循环中i等于0两次。在以下代码段代码中：
for (var i = 0; children.length > i; i++ ) {
(function(children, i, time){
setTimeout (function(){
// fade out current slide
setTimeout(function(){
fadeItOut(children[i]);
},2000);
// wait for the execution of the if statement
var nextSlide = window.setInterval(function(){
// if the current slide is not the first slide
// and if the slide before current slide has faded out
if(children[i-1] && children[i-1].style.opacity === "") {
// show the next slide
children[i].style.display = 'block';
nextSlide = window.clearInterval(nextSlide);
}
// if the current slide is the first slide
else if (i === 0) {
// just show it
children[i].style.display = 'block';
}
},1);
}, time);
})(children, i, time)
time += 2000;
}
这是整个脚本：
var magic = window.setInterval(function(){
if (document.readyState === "complete") {
// globals
var children = document.getElementById('slide-container').children,
time = 2000;
// fadeout function
function fadeItOut (element) {
var child = element;
// get the current opacity
function opacityNo (element) {
if (element.style.opacity === "") {
return 1;
} else {
return element.style.opacity;
}
};
child.style.opacity = opacityNo(child);
//decrase opacity to 0 by 1
var decrase = window.setInterval(function(){
child.style.opacity -= 1/100;
if (child.style.opacity <= 0.01) {
child.style.opacity = "";
child.style.display = 'none';
decrase = window.clearInterval(decrase);
}
},1);
};
// start the show
for (var i = 0; children.length > i; i++ ) {
(function(children, i, time){
setTimeout (function(){
// fade out current slide
setTimeout(function(){
fadeItOut(children[i]);
},2000);
// wait for the execution of the if statement
var nextSlide = window.setInterval(function(){
// if the current slide is not the first slide first
// and if the slide before current slide has faded out
if(children[i-1] && children[i-1].style.opacity === "") {
// show the next slide
children[i].style.display = 'block';
nextSlide = window.clearInterval(nextSlide);
}
// if the current slide is the first slide
else if (i === 0) {
// just show it
children[i].style.display = 'block';
}
},1);
}, time);
})(children, i, time)
time += 2000;
}
// end the show
console.log(time);
magic = window.clearInterval(magic);
} else {
console.log("...");
}
}, 1000);
关键是它会等到上一张幻灯片完全淡出后再显示下一张幻灯片。
我将它与这个 HTML 一起使用：`
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<script type="text/javascript" src="slideshow.js"></script>
</head>
<body>
<ul id="slide-container">
<li style="display: none;"><img src="http://i.imgur.com/8qBcyzc.jpg"></li>
<li style="display: none;"><img src="http://i.imgur.com/oxMTFTF.png"></li>
<li style="display: none;"><img src="http://i.imgur.com/JTM6Yqg.jpg"></li>
</ul>
</body>
`
当您运行它时，您会看到当第一个图像淡出时，它会立即再次出现。