неизвестные поля в моем слайд-шоу jquery? - PullRequest
Новая
       3

неизвестные поля в моем слайд-шоу jquery?

5 голосов
/ 20 мая 2010

У меня есть неизвестное поле слева и верхняя часть моего слайд-шоу 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

Ответы [ 4 ]

1 голос
/ 01 июня 2010

ОК, если я вырежу ваш javascript и закомментирую стили 'left' и 'top' из вашего CSS, и добавлю правило CSS ниже, то я получу все картинки, сложенные вертикально, из самого верхнего левого угла (без полей-призраков). 

body {margin: 0;}

Также вы должны использовать более новую версию jQuery (v1.4.2). Наконец, вы пропустили открывающую угловую скобку в строке Page Language = "VB" в верхней части вашего цитируемого кода, но уверены ли вы, что эта строка там нужна? Вы можете попробовать удалить его ...

Если вы примените эти изменения CSS и удалите верхнюю строку, и она все еще не работает, нам нужно будет увидеть ваш скрипт cycle.js.

0 голосов
/ 03 июля 2010

убедитесь, что поля html, body, ul и li и отступы равны 0. Если в вашем слайдере есть сгенерированные теги P или обертки, добавьте к этому поле margin и padding 0. Для тестирования вы можете попробовать поставить красную рамку для вашего класса "фото", чтобы увидеть, действительно ли он находится сверху и оставляет 0 по отношению к телу. Я бы порекомендовал вам использовать что-то вроде Firebug для firefox, чтобы проходить через каждый элемент и проверять, не переполняется ли что-нибудь из вашего первого контейнера DIV.

0 голосов
/ 01 июля 2010

Я согласен с @jackocnr, если плагин cycle.js, скорее всего, динамически создает таблицу стилей. Спецификации автора должны объяснить, как настроить / настроить, если это возможно. Попробуйте использовать вкладку «Метрики» в инструментах разработчика Chrome, чтобы определить элемент, содержащий пространство, в качестве диагностического инструмента.

0 голосов
/ 20 мая 2010

Вы пытались сбросить все поля и отступы до 0 в теле {}?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...