Javascript Nivo滑块在顶部添加徽标_Javascript_Jquery_Overlay_Nivo Slider

Javascript Nivo滑块在顶部添加徽标

javascript jquery

Javascript Nivo滑块在顶部添加徽标,javascript,jquery,overlay,nivo-slider,Javascript,Jquery,Overlay,Nivo Slider,嘿，伙计们，我已经按照我的规格设置了Nivo滑块，但我想能够做的是将我的徽标覆盖在它的顶部。我试过玩弄z指数，但没用 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <html lang="en"&

嘿，伙计们，我已经按照我的规格设置了Nivo滑块，但我想能够做的是将我的徽标覆盖在它的顶部。我试过玩弄z指数，但没用

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
    <title>Nivo Slider Demo</title>
    <link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../themes/pascal/pascal.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../themes/orman/orman.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>

    <div id="header"><div class="slider-wrapper theme-default"><div id="slider" class="nivoSlider">
                <img src="images/dog.jpg" alt="" />
                <img src="images/cat.jpg" alt="" />
          </div></div></div><script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="../jquery.nivo.slider.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
</body>
</html>

提前谢谢

Adam将其加载到js fiddler上，它似乎可以工作：

正如@Reporter所说，没有任何消息来源，很难知道你在做什么。我刚刚和菲尔布格玩了一场，我能在尼沃滑板上找到一些东西

<div style="position: absolute; top: 300; left:500; height: 100px; width: 100px; background: red; z-index: 100;">hello</div>

你好这是放置在滑块div之外的。代码很糟糕，但这只是一个开始，让您看看它是否可以工作，您可以用图像替换div，或者将图像作为div的背景

编辑：我在这一页上搞乱了firebug：无法向你展示图像思维

编辑2：我的解决方案是HTML和CSS，而不是真正的javascript，所以不确定您希望如何实现它。您可以使用jquery动态注入“覆盖”，并将其加载到js fiddler上，它似乎可以工作：

正如@Reporter所说，没有任何消息来源，很难知道你在做什么。我刚刚和菲尔布格玩了一场，我能在尼沃滑板上找到一些东西

<div style="position: absolute; top: 300; left:500; height: 100px; width: 100px; background: red; z-index: 100;">hello</div>

你好这是放置在滑块div之外的。代码很糟糕，但这只是一个开始，让您看看它是否可以工作，您可以用图像替换div，或者将图像作为div的背景

编辑：我在这一页上搞乱了firebug：无法向你展示图像思维

编辑2：我的解决方案是HTML和CSS，而不是真正的javascript，所以不确定您希望如何实现它。您可以使用jquery动态注入“覆盖”

到目前为止您做了什么？你能给我们看一下你的源代码吗？更新了我的帖子，做了一个小js fiddler测试，它正在工作，看看你到目前为止做了什么？你能给我们看一下你的源代码吗？更新了我的帖子，做了一个小js fiddler测试，它正在工作，检查它的权利得到了框显示在顶部，但我有滑块空白0自动宽度为900px；我如何让红方块显示宽度为900px的margin 0 auto，我已将其上传到我的网络空间与Rob一起玩，感谢Rob的帮助：）因为它是绝对位置，不在文档流中，所以margin 0 auto无法工作，您需要设置滑块的宽度和高度，并使用顶部的“顶部”和“左侧”属性将其放置在顶部。更新fiddler以显示这个使用过的RGBA，因此使用firefox之类的工具查看忽略上述内容，只需查看页面，将覆盖div移动到#slider div中，它就会自行解决。这似乎可行，但唯一的问题是#slider中的所有内容都被认为是旋转木马的一部分。所以.overlay是在它自己的幻灯片上的…你可以简单地将整个部分包装在另一个div中，给它一个slider wrap的id，给它一个margin auto，并将所有内容放入其中，确保slider wrap css具有位置：relativeRight将框显示在顶部，但我有一个宽度为900px的slider margin 0 auto；我如何让红方块显示宽度为900px的margin 0 auto，我已将其上传到我的网络空间与Rob一起玩，感谢Rob的帮助：）因为它是绝对位置，不在文档流中，所以margin 0 auto无法工作，您需要设置滑块的宽度和高度，并使用顶部的“顶部”和“左侧”属性将其放置在顶部。更新fiddler以显示这个使用过的RGBA，因此使用firefox之类的工具查看忽略上述内容，只需查看页面，将覆盖div移动到#slider div中，它就会自行解决。这似乎可行，但唯一的问题是#slider中的所有内容都被认为是旋转木马的一部分。因此.overlay是在它自己的幻灯片上的…你可以简单地将整个部分包装在另一个div中，给它一个slider wrap的id，给它一个margin auto，并将所有内容放在其中，确保slider wrap css具有position:relative