Question

我左边有一个未知的边距，我的jquery幻灯片的顶部..无法弄清楚发生了什么？请帮忙！！！下面是代码和截图

    %@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!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 runat="server">
    <title>Untitled Page</title>

    <script src="js/jquery-1.3.2.js" type="text/javascript"></script>

    <script src="js/cycle.js" type="text/javascript"></script>

    <script type="text/javascript">
$("document").ready(function(){

$('#slideshow').before('<ul id="nav">').cycle({
    fx:     'turnDown',
    speed:  'fast',
    timeout: 0,
    pager:  '#nav',

    // callback fn that creates a thumbnail to use as pager anchor
    pagerAnchorBuilder: function(idx, slide) {
        return '<li><a href="#"><img src="' + slide.src + '" width="198" height="93" /></a></li>';

    }

});

  $('li:lt(3)').wrapAll('<div class="wrapper" />');
 $('li:gt(2)').wrapAll('<div class="wrapper2" />');

});

    </script>

    <style type="text/css">
        #slideshow
        {
            height: 300px;
            width: 469px;
            padding: 0;
            margin-top: 0px;
            position: absolute;
            left: 267px;
            top: 25px;
        }
        #slideshow img
        {
            padding: 10px;
            border: 1px solid #ccc;
            background-color: #eee;
            width: 449px;
            height: 290px;
        }
        .wrapper
        {
            width: 217px;
            float: left;
        }
        .wrapper2
        {
            width: 217px;
            float: right;
        }
        #nav
        {
            width: 920px;
            float: left;
        }
        #nav li
        {
            width: 198px;
            margin-top: 0px;
            float: left;
            margin-bottom: 5px;
            margin-left: 0px;
            list-style: none;
        }
        #nav a
        {
            width: 198px;
            height: 93px;
            padding: 3px;
            display: block;
            border: 1px solid #ccc;
            background-color: #eee;
        }
        #nav a.activeSlide
        {
            background: #88f;
        }
        #nav a:focus
        {
            outline: none;
        }
        #nav img
        {
            border: none;
            display: block;
        }
    </style>
</head>
<body>
    <div id="slideshow" class="pics">
        <img src="http://farm2.static.flickr.com/1429/1252247669_5f014e7dc1_b.jpg" />
        <img src="http://farm1.static.flickr.com/153/332584527_bd5efc0197_o.jpg" />
        <img src="http://farm4.static.flickr.com/3031/2744217176_33eeeef93a_b.jpg" />
        <img src="http://farm2.static.flickr.com/1429/1252247669_5f014e7dc1_b.jpg" />
        <img src="http://farm1.static.flickr.com/153/332584527_bd5efc0197_o.jpg" />
        <img src="http://farm4.static.flickr.com/3031/2744217176_33eeeef93a_b.jpg" />
    </div>
</body>
</html>

这是截图

的链接

http://img337.imageshack.us/img337/9043/sliderb.jpg

Answer 1

好吧，如果我删除你的javascript，并从你的CSS中注释掉'left'和'top'样式，并在下面添加CSS规则，那么我将从左上角垂直堆叠所有图片（没有幽灵边缘）。

body {margin: 0;}

此外，您应该使用较新版本的jQuery（v1.4.2）。最后，您在引用代码顶部的Page Language =“VB”行中错过了一个开口角括号，但是您确定需要那条线吗？您可能想尝试删除它......

如果您应用这些CSS更改并删除该第一行，但它仍然无效，我们将需要查看您的cycle.js脚本。

Answer 2

您是否尝试将所有边距和填充重置为正文{}？

Answer 3

我同意@jackocnr，如果cycle.js是一个插件，它很可能是动态构建样式表。作者的规范应该解释如何调整/定制，如果可能的话。尝试使用Chrome的开发者工具的“指标”标签来识别包含空间的元素，作为诊断工具。

Answer 4

确保html，body，ul和li边距和填充为0.如果在滑块中生成了任何P标签或包装内容，请同时添加边距和填充0。为了进行测试，您可以尝试为“pics”类设置一个红色边框，以查看它是否真的位于顶部，而左侧是0。我建议你使用像Firebug这样的东西来运行每个元素，看看是否有任何东西从你的第一个DIV容器溢出。

我的jquery幻灯片上的未知边距？

4 个答案: