Question

我有问题=）基于我知道可行的幻灯片代码，我用方框替换了图像，我希望他们每隔一秒钟一个接一个地“激活”。我根本没有弄错代码。

<!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>

再次感谢您的帮助！ =）

Answer 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/

Javascript幻灯片效果

1 个答案: