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">hasheightwidth属性对于<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 回答