Question

编辑：不知何故，我知道，经过两天的捣乱，我在这里发布之后就明白了。为了将来参考，auto似乎因某种原因不适用于高度和宽度。在循环插件中手动定义它，如果使用不同大小的图像，请使用查找器功能查找最大值。这似乎有效，但如果有人有解决方案让“汽车”恢复工作，我会喜欢它。对不起浪费空间！

工作周期代码：

$('.fadeit').cycle({ 
    fx:     'fade',
   *width:   240,
   *height:  320,
    speed:   300, 
    timeout: 3000, 
    next:   '.fadeit', 
    pause:   1 ,
    slideExpr: 'img.andy'
});

这是我见过的其他人所遇到的问题，我之前曾经遇到过这个问题并且已经解决了。不幸的是，即使在使用之前似乎工作的“修复”（位置绝对并向左或向右浮动）之后，它也会重新弹出。当我的页面开始加载时，文本出现在图像旁边，正如它应该的那样。一旦cycle-lite启动，文本就会在幻灯片放映下移动（因为它的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.

Answer 1

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，当你为你做这个，子图像上的冗余浮点数等等。这是我建议的代码：

<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.

对不起，这可能不是你所希望的答案！

当循环精简开始时，定位搞砸了

1 个答案: