6

我有一个运行 malsup 的很棒的 jQuery 循环的页面。我使用的是最新版本 (2.99) 和 Safari 5.0.5。之前没遇到过下面的问题，感觉有点奇怪。

问题

有时当页面加载时，.slides元素只有 654 像素宽。我在 css 文件中将其设置为 960px。但是当我使用 JavaScript 来获取.slides元素的宽度时，它说它是 1271px 宽。嗯？这个问题偶尔也会发生在 Firefox (3.6.16) 上，但没有 Safari 那么多。奇怪的是，我似乎无法在 IE8 中复制此错误。

我的代码都是 W3C 有效的（除了对边界半径的 3 次调用）。也许使用表单元素作为循环容器有限制？是 Safari 行为不端吗？

JS：

$(document).ready(function(){
  var sw = $('.slides').width();
  $('.slides').cycle({
    fx: 'scrollHorz',
    nowrap: 0,
    fit: 1,
    timeout: 0,
    next: '.next',
    prev: '.prev',
    speed: 250
  });
  if (sw != 960){
    $('.slides').css('width','960px');//to set the width to 960, so it doesn't clip the form
    $('.slides').css('background-color','#ff00ff');//so i know when the problem is occuring
  }
});

CSS：

#content{
    float:left;
    width:100%;
}

    .wrapme{
        width:960px;
        height:auto;
        margin:0 auto;
    }

    .slides{
        float:left;
        width:960px;
        height:auto;
        overflow:auto;
    }

您可以（希望）在此处查看实际的“错误” 。我很想知道其他人是否没有发生这种情况（可能必须按 F5 几次）。

我很想修复这个烦人的小错误。在循环后设置容器宽度的解决方法已经调整了它（毫无疑问是错误的宽度）只解决了一半的问题。移至下一张幻灯片后，宽度将减半。下一张幻灯片，它再次减半。所以在幻灯片 3 之后，它将所有内容压缩到 240 像素宽。

我想解决这个问题的方法是强迫每个人都使用 Firefox/IE（它将驻留在公司内部网上）。

感谢您提前提供任何帮助和见解！

担

编辑 更新链接：https ://necms.com.au/cycle_oddities.php

4

4 回答 4

5

Jquery Cycle 插件有一个错误......我找到的解决方案是在after那里手动设置回调函数和设置高度。

$('.slides').cycle({
    fx: 'scrollHorz',
    nowrap: 0,
    fit: 1,
    timeout: 0,
    next: '.next',
    prev: '.prev',
    speed: 250,
    after: function (){
        $(this).parent().css("height", $(this).height());
     },   
  });
于 2012-04-26T14:27:24.740 回答
1

这似乎是 jQuery Cycle 的一个错误。我不知道是因为浮动的子元素还是发生这种情况时页面上通常有多个 jQuery Cycle 实例的事实。我需要深入挖掘。

对我有用的一种解决方法是在选项中设置容器的height和，然后指定幻灯片必须像这样的容器：widthcyclefit

 $('#myCycle').cycle({
      fx: 'scrollHorz',
      width: 430,
      height: 100,
      fit: 1
 });
于 2012-03-20T23:11:42.623 回答
0

我用了这个，它奏效了。cycle 尝试获取 size 属性并将它们发送回去。

                after: function (){
                $(this).css("height", "");
                $(this).css("width", "");
于 2013-07-30T14:35:44.500 回答
0

尝试设置以下内容：

容器调整大小：0，幻灯片调整大小：0

为我工作。

$('.slides').cycle({
   fx: 'scrollHorz',
   nowrap: 0,
   fit: 1,
   timeout: 0,
   next: '.next',
   prev: '.prev',
   speed: 250,
   containerResize: 0,
   slideResize: 0
});
于 2013-02-13T19:18:28.020 回答