编辑：不知何故，经过两天的混乱，我才知道在我将其发布到这里后就可以解决了。供以后参考，由于高度和宽度的某种原因，汽车似乎无法正常工作。在循环插件中手动定义它，如果使用不同尺寸的图像，请使用查找器功能查找最大值。这似乎可行，但是如果有人有解决方案可以使“自动”恢复正常工作，我会喜欢的。很抱歉浪费空间！
工作周期代码：
$('.fadeit').cycle({
fx: 'fade',
*width: 240,
*height: 320,
speed: 300,
timeout: 3000,
next: '.fadeit',
pause: 1 ,
slideExpr: 'img.andy'
});
这是我见过其他人遇到的一个问题，而我以前也曾解决过。不幸的是，即使使用了以前似乎可以使用的“修复”（位置绝对，并向左或向右浮动），它也突然弹出来。当我的页面开始加载时，文本按预期显示在图像旁边。一旦轻循环启动，文本就会在幻灯片下方移动（看起来像z-index较低），因此将其隐藏。我使用的CSS配置似乎无关紧要，但是我假设这一定是问题所在。我听说完整的循环插件可以正常工作，但是我只能编辑身体的一部分，而循环精简版是预先包含在头部中的内容。我也不能真正更改“这是一些文本”，因为我并不总是写该文本。这将进入一个库，但是如果不先使其在小型环境下工作，我就无法真正将它放在那里。
我的代码：
<div height="320" width="240" style="position:relative; float:left; padding:5px;" id="thisisit" class="fadeit">
<img height="320" width="240" alt="" src="http://news.phdcon.com/UserFiles/217/image/2750/2750-1.jpg" style="position:relative; display:none; float:left; padding:5px;" class="andy" />
<img height="320" width="240" alt="" src="http://news.phdcon.com/UserFiles/217/image/2750/2750-2.jpg" style="position:relative; display:none; float:left; padding:5px;" class="andy" />
<img alt="" src="http://news.phdcon.com/UserFiles/217/image/2750/2750-3.jpg" style="position:relative; visibility:visible; float:left; padding:5px;" class="andy"/>
<script language="javascript" type="text/javascript">
window.onload=function() {
var aclass = '.' + 'andy';
$(aclass).css('display','inline');
$('.fadeit').cycle({
fx: 'fade',
speed: 300,
timeout: 3000,
next: '.fadeit',
pause: 1 ,
slideExpr: 'img.andy'
}); };
</script>
</div>
This is some text.
最佳答案
width: 'auto'在这里不起作用，因为cycle-lite将.fadeit的每个子元素放入绝对位置，从而将它们从流中移除，并为.fadeit提供有效的自动宽度0。（我不知道为什么您以前的“修复程序”似乎会起作用；浮动和绝对定位不会混合在一起。）
我注意到<div class="fadeit">具有height和width属性，这对于<div>是不合法的。但是，如果将它们替换为style属性中的那些尺寸（style="width: 240px; height: 320px; ..."），则原始JS（无硬编码的宽度和高度）可以使用。我不知道在您的情况下在HTML / CSS中对它们进行硬编码是否比在JS中更好，但是基于您提供的示例代码，我猜可能是这样吗？
我还注意到您的示例代码中有很多无关的CSS（例如position: relative上的.fadeit，当cycle-lite将为您执行此操作时，子图像上的多余浮点等）。这是我建议的代码：
<div style="float: left; padding: 5px; height: 320px; width: 240px;" id="thisisit" class="fadeit">
<img height="320" width="240" alt="" src="http://news.phdcon.com/UserFiles/217/image/2750/2750-1.jpg" style="display: none;" class="andy" />
<img height="320" width="240" alt="" src="http://news.phdcon.com/UserFiles/217/image/2750/2750-2.jpg" style="display: none;" class="andy" />
<img alt="" src="http://news.phdcon.com/UserFiles/217/image/2750/2750-3.jpg" class="andy"/>
<script language="javascript" type="text/javascript">
window.onload=function() {
var aclass = '.' + 'andy';
$(aclass).css('padding':'5px');
$('.fadeit').cycle({
fx: 'fade',
speed: 300,
timeout: 3000,
next: '.fadeit',
pause: 1 ,
slideExpr: 'img.andy'
}); };
</script>
</div>
This is some text.
抱歉，这可能不是您想要的答案！
关于jquery - lite自行车骑行开始时，位置困惑，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6005829/