2

我回来了=）基于我知道有效的幻灯片的代码，我用方形框替换了图像，我希望它们以秒为间隔一个接一个地“激活”。我根本不明白代码有什么问题。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>MiniAnimation</title>

        <script type="text/javascript">

            window.addEventListener("load",onLoadWindow);

            var active_slide;
            var slides;

            function onLoadWindow(e) {
                var slideShow=document.getElementById("boxofBoxes");
                slides=slideShow.getElementsByTagName("div");
                active_slide=0;

                slides[0].classList.add("active");

                setInterval(nextSlide,1000);
            }



            function nextSlide () {
                slides[active_slide].classList.remove("active");
                active_slide++;

                active_slide%=5;

                slides[active_slide].classList.add("active");
            }

        </script>

        <style type="text/css">

            body {
                background-color:lightblue;
            }

            .active {
                opacity:1;
                transition:opacity 1s;
            }

            .box {
                display:block;
                float:left;
                width:25px;
                height:25px;
                background-color:white;
                margin-left:63px;
                opacity:0;
            }

            #boxofBoxes {
                width:503px;
            }

        </style>

    </head>

    <body>
        <div id="boxofBoxes">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </div>
    </body>

</html>

再一次感谢你的帮助 ！=)

4

1 回答 1

1

由于您的 CSS 的编写顺序， 将opacity: 0;覆盖opacity: 1;. 试试这样：

.box {
    display:block;
    float:left;
    width:25px;
    height:25px;
    background-color:white;
    margin-left:63px;
    opacity:0;
    transition: opacity 1s;
}

.active {
    opacity: 1;    
}

您必须自己弄清楚不透明度过渡和定位，但希望这会有所帮助！

这是一个 jsFiddle 玩：http: //jsfiddle.net/sJNvw/

于 2013-04-01T01:28:57.073 回答