2

编辑：不知何故，在搞砸了两天之后，我知道我会在我把它贴在这里之后弄清楚。供将来参考，由于高度和宽度的某种原因，自动似乎不起作用。在循环插件中手动定义它，如果您使用不同尺寸的图像，请使用查找器功能查找最大值。这似乎可行，但如果有人有解决方案让“自动”恢复工作，我会喜欢的。很抱歉在这上面浪费了空间！

工作周期代码：

$('.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.
4

1 回答 1

2

width: 'auto'在这里不起作用，因为 cycle-lite 获取每个子元素.fadeit并将其置于绝对定位中，从而将它们从流中移除并给出.fadeit有效的自动宽度为 0。（我不知道为什么你之前的“修复”会看起来工作；浮动和绝对定位不混合。）

我注意到<div class="fadeit">hasheight和width属性对于<div>. 但是，如果您将它们替换为style属性中的那些尺寸 ( style="width: 240px; height: 320px; ...")，则您的原始 JS（没有硬编码的宽度和高度）可以工作。我不知道在您的情况下，在 HTML/CSS 中对它们进行硬编码是否比在 JS 中更好，但是根据您提供的示例代码，我猜可能是这种情况？

我还注意到您的示例代码中有很多无关的 CSS（例如position: relative，关于.fadeitcycle-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.

抱歉，这可能不是您想要的答案！

于 2011-05-20T14:41:58.723 回答