Плагин jQuery "Cycle", приводящий к смещению контента, как это можно исправить? - PullRequest
Новая
       3

Плагин jQuery "Cycle", приводящий к смещению контента, как это можно исправить?

0 голосов
/ 02 октября 2010

Я пытаюсь использовать плагин jQuery "Cycle" (http://jquery.malsup.com/cycle/), чтобы вращать отзывы, расположенные в пределах <span> s ... однако плагин заставляет мой контент не центрироваться. Вчера утром кто-то здесь указал на <span> элементы абсолютно позиционируются плагином: $slides.css({position: 'absolute', top:0, left:0}).hide()

Я не знаю JS, и я все еще работаю над своим HTML / CSS, поэтому я надеялся, что кто-то здесь знает, как это исправить, и может мне помочь. Если не ну хорошо: /

Я попытался добавить left:50%, и хотя он центрируется, слайд разбит, и все мои <span> отображаются одновременно.

[Изменить]

Вот HTML & CSS: 

<div class="slideshow">
<span style="font-size:12px; color:#333333; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;">Hi</span>
<span style="font-size:12px; color:#333333; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;">Goodbye</span>
</div><br />

.slideshow {
width:940px;
height:64px;
text-align:center;
background-image:url(../images/quotes.png);
}

В одиночку все работает, как запланировано. Затем я добавляю плагин jQuery / Cycle: 

// set position and zIndex on all the slides
    $slides.css({position: 'absolute', top:0, left:0}).hide().each(function(i) {
        var z;
        if (opts.backwards)
            z = first ? i <= first ? els.length + (i-first) : first-i : els.length-i;
        else
            z = first ? i >= first ? els.length - (i-first) : first-i : els.length-i;
        $(this).css('z-index', z)
    });

Вот к чему все это приводит. Таким образом, <span> отображаются по одному и постепенно исчезают, как и предполагалось, за исключением того, что текст больше не центрируется из-за абсолютного позиционирования. Поэтому я изменил left:0 на left:50% - ага! Текст, решаемый проблемой, центрируется, за исключением того, что СЕЙЧАС все пролеты отображаются одновременно, а затухание не происходит.

1 Ответ

0 голосов
/ 02 октября 2010

Без кода это нелегко вызвать, но я предполагаю, что отзывы находятся внутри какого-то блочного элемента.Если вы примените position:relative к этому элементу, абсолютно позиционированные <span> s будут содержаться внутри.Вы не должны действительно применять какие-либо стили позиционирования к самим промежуткам - скорее оставьте это плагину.

Надеюсь, что это поможет

РЕДАКТИРОВАТЬ

Хорошо, попробуйте это: 

.slideshow {
    width:940px;
    height:64px;
    background-image:url(../images/quotes.png);
    position:relative;
    }

.slideshow span {
    display:block;
    }

Возможно, вам придется вручную установить ширину <spans> с, чтобы соответствовать ширине div.slideshow

...