1

我一直在为朋友制作网站，基本上我使用教程制作了旋转图像的背景。使用 GIF 的松散图像颜色为我节省了空间。无论如何，这是问题所在：我将它作为背景工作并使其出现在导航后面，但是当我这样做时，导航处于非活动状态（例如，尽管图像出现在导航后面，但它注册为在它的前面，所以你可以'不要点击任何东西）并且每当图像淡出成新图像时，导航就会消失并重新出现在新图像上。我玩了 z-index 但没有任何乐趣，非常困惑。

我知道这些事情很难解释，所以在这里，给自己一个测试服务器！！！

http://78.47.244.67/John/index.php

这至少显示了会发生什么，我也可以提供代码：

以下是 CSS、HTML 和 Javascript 中背景、图像旋转的代码：

<html>
    <head>
        <style type="text/css">
            body {
                color:#000;
                background-color:#000;
            }
        </style>

        <style type="text/css">
            div.rotator {
                position:relative;
                display:none;
            }

            div.rotator ul li {
                float:left;
                position:absolute;
                list-style: none;
                margin:0px;
                padding:0px;
            }

            div.rotator ul li img {
                width:1600px;
                height:780px;
                margin:0px;
                padding:0px;
            }

            div.rotator ul li.show {
                z-index:-500;
            }
        </style>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

        <script type="text/javascript">
            function theRotator() {
                $('div.rotator ul li').css({opacity: 0.0});
                $('div.rotator ul li:first').css({opacity: 1.0});
                setInterval('rotate()',6000);
            }

            function rotate() { 
                var current = ($('div.rotator ul li.show')?  $('div.rotator ul li.show') : $('div.rotator ul li:first'));
                if(current.length == 0) current = $('div.rotator ul li:first');
                var next = ((current.next().length) ? ((current.next().hasClass('show')) ? 
                $('div.rotator ul li:first') :current.next()):$('div.rotator ul li:first'));
                //Un-comment the 3 lines below to get the images in random order
                var sibs = current.siblings();
                var rndNum = Math.floor(Math.random() * sibs.length );
                var next = $( sibs[ rndNum ] );
                //Set the fade in effect for the next image, the show class has higher z-index
                next.css({opacity: 0.0})
                .addClass('show')
                .animate({opacity: 1.0}, 1000);
                current.animate({opacity: 0.0}, 1000)
                .removeClass('show');
            };

            $(document).ready(function() {      
                theRotator();
                $('div.rotator').fadeIn(1000);
                $('div.rotator ul li').fadeIn(1000);
            });
        </script>
    </head>

    <body>
        <div class="rotator">
            <ul>
                <li class="show"><img src="img/trackbike.jpg"/></li>
                <li><img src="img/trackcar.jpg"/></li>
                <li><img src="img/drifting.jpg"/></li>
                <li><img src="img/mtb.jpg"/></li>
                <li><img src="img/wildlife.jpg"/></li>
            </ul>
        </div>
    </body>
</html>

这是导航的 CSS 代码：

#sideNav {
    width:270px;
    height:900px;
    float:left;
    background-color: rgba(0, 0, 0, 0.5);
    z-index:500;
}

#sideNav img {
    padding-left:65px;
    padding-top:120px;
    padding-bottom:100px;
}

#sideNav a {
    padding-left:65px;
    color:#CCC;
    text-decoration:none;
    font: 28px Verdana, Geneva, sans-serif;
}

#sideNav li a:hover,
#sideNav li.current-page a {
    color:#ffc600;
}

#sideNav p a {
    float:right;
    font:10px Verdana, Geneva, sans-serif;
    color:#fff;
    text-decoration:none;
}

#sideNav p a:hover {
    color:#ffc600;
}

#sideNav p {
    font-size:10px;
    color:#FFF;
    padding-top:100px;
    padding-left:62px;
    width:120px;
}

任何人都能够想出一个为什么？或者更好的解决方案？我很难过：/

任何帮助深表感谢，

塔，约翰

4

1 回答 1

2

为什么？不知道，但如果你添加

z-index: -1

在rotator课堂上，悬停看起来就像你想要的那样工作。

于 2012-12-21T01:51:38.743 回答