请问怎么实现叠加的盒子先后自动显示和隐藏？

我有3个盒子，3个盒子是叠加在一起的，我想实现这三个盒子自动按顺序先后显示和隐藏，有点类似于图片的那种自动换图，但我发现用图片的那种方法做不了。。求哪位大侠能帮帮忙，解小弟疑惑！！！

解决方案 »

  1.   

    这种？<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var currentIndex = 0;
                var total = $('.container ul li').length;//总的图片
                var getCurrentIndex = function () {//得到目前的Index
                    if (currentIndex > total-1) {//到最后一张
                        currentIndex = 0;
                        return 0;
                    } else {
                        return currentIndex;
                    }
                };            function change() {
                    $(".container img").stop(true, true); //stop动画，确保上一个动画完成               
                    //显示和隐藏图片
                    $('.container img').each(function () {
                        $(this).fadeOut('slow');
                    });
                    $('.container img').eq(getCurrentIndex()).fadeIn('slow');
                    //目前的Index++,用于循环
                    currentIndex++;
                }         
                //循环
                var sId = setInterval(change, 3000);            //鼠标移上停止循环
                $('.container').hover(function () {
                    clearInterval(sId);
                }, function () {//移除循环
                    sId = setInterval(change, 3000);
                });
            });
            
        </script>
        <style type="text/css">
        *
        {
            margin:0px;
            padding:0px;
        }
        ul li
        {
            list-style-type:none;
        }
        .container li
        {
            cursor:pointer;   
        }
        .container
        {
            border:1px solid #ccc;
            width:740px;
            margin:10px auto;
            position:relative;
            height:312px;
        }
        .container li
        {
            position:absolute;
            top:0px;
            left:0px;    }
        
        </style>
    </head>
    <body>
    <div class="container">
        <ul>
            <li><img src="http://images.movie.xunlei.com/gallery/657/9f60320812cd042174df02065fae1c90.jpg" /></li>
            <li><img src="http://images.movie.xunlei.com/gallery/656/175a0c1e31195dd9fcee8befd9237ce2.jpg" /></li>
            <li><img src="http://images.movie.xunlei.com/gallery/657/06c47703682c6ca14f740c7dda562b51.jpg" /></li>
        </ul>
    </div>
    </body>
    </html>