0

所以我正在制作一个小幻灯片脚本。问题是在一个循环中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>

`

当您运行它时，您会看到当第一个图像淡出时，它会立即再次出现。

jsFiddle

4

1 回答 1

1

请看这个jsfiddle

它通过删除else if您验证 if 的语句来工作i === 0。此验证必须在前面的if语句中完成。

if((children[i-1] && children[i-1].style.opacity === "") || i === 0) {
    // show the next slide
    children[i].style.display = 'block';
    window.clearInterval(nextSlide);
}

我建议您z-index通过将下一张图像放在活动图像后面来玩弄。这将阻止显示背景，并且过渡会很好。

于 2013-07-21T16:16:39.583 回答