[英]jQuery “Cycle” plugin causing content to not center, how can I fix this?
I'm trying to use the jQuery "Cycle" plugin (http://jquery.malsup.com/cycle/) to rotate testimonials located within <span>
s ... however the plugin is causing my content to not be centered. 我正在尝试使用jQuery“ Cycle”插件(http://jquery.malsup.com/cycle/)旋转位于<span>
s内的推荐书...但是该插件导致我的内容未居中。 Yesterday morning someone here pointed out the <span>
elements are being absolutely positioned by the plugin: $slides.css({position: 'absolute', top:0, left:0}).hide()
昨天早上有人在这里指出<span>
元素已由插件绝对定位: $slides.css({position: 'absolute', top:0, left:0}).hide()
I don't know JS and I'm still working on my HTML/CSS, so I was hoping someone here knew a fix for this and could help me. 我不知道JS,但我仍在研究HTML / CSS,所以我希望这里的人知道此问题的修复程序并可以对我有所帮助。 If not oh well :/ 如果不是,那就好吧:/
I've tried adding left:50%
and although it centers, the slide is broken and all my <span>
s appear at once. 我尝试添加left:50%
,尽管它居中,但幻灯片已损坏并且我的所有<span>
都立即出现。
[Edit] [编辑]
Here's the HTML & CSS: 这是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);
}
Alone, everything works as planned. 独自一人,一切都按计划进行。 Then I add the jQuery/Cycle plugin: 然后添加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)
});
This is what screws it all up. 这就是一切。 As is, the <span>
s are shown one at a time and fade in and out like they're supposed to, except the text isn't centered anymore due to the absolute positioning. 照原样,一次显示一次<span>
,然后像预期的那样淡入和淡出,但由于绝对位置导致文本不再居中。 So I changed left:0
to left:50%
- wha la! 因此,我将left:0
更改为left:50%
-哇! Problem solved text is centered, except NOW the spans are all shown at the same time and there's no fading in/out. 问题解决的文本居中,但现在跨度全部显示在同一时间,并且没有淡入/淡出。
Without the code this isn't easy to call but I assume the testimonials are within a block element of some sort. 没有代码,这很难调用,但是我认为推荐书在某种形式的块元素中。 If you apply position:relative
to that element the absolutely positioned <span>
s will be contained within. 如果将position:relative
应用于该元素,则绝对位置的<span>
将包含在其中。 You shouldn't really apply any positioning styles to the spans themselves - rather leave that to the plugin. 您实际上不应该对跨度本身应用任何定位样式-而是将其留给插件。
Hope that helps 希望能有所帮助
EDIT 编辑
Okay try this: 好吧,尝试一下:
.slideshow {
width:940px;
height:64px;
background-image:url(../images/quotes.png);
position:relative;
}
.slideshow span {
display:block;
}
You may need to manually set the width of the <spans>
s as well to match the width of the div.slideshow
您可能还需要手动设置<spans>
的宽度,以匹配div.slideshow
的宽度。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.