我正在尝试使用 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>
s 立即出现。
[编辑]
这是 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>
s 一次显示一个,并像他们应该的那样淡入和淡出,除了由于绝对定位,文本不再居中。所以我改成left:0
了left:50%
——哇!解决问题的文本居中,除了现在跨度都同时显示并且没有淡入/淡出。