使用jQuery Cycle幻灯片尝试调整窗口大小

Question

我正在尝试在一个带有jQuery幻灯片的页面上运行JavaScript窗口调整脚本，但我遇到了一些无法解决的错误。它可以在页面加载时很好地调整第一张图片的大小，但随后的幻灯片会忘记新的高度/宽度属性。我可以在使用jQuery之前和之后再次设置这些属性，但图像始终会在调整大小之前以全尺寸闪烁一小段时间。

jQuery.cycle是否将幻灯片调整回其原生大小？如果是，我该如何停止这个过程？

$(document).ready(function () {
  $('.slideshow').cycle({
    fx: 'fade',
    speed: 200,
    timeout: 1000,
    pause: 1,
    before: function (currSlideElement, nextSlideElement, options, forwardFlag) {
      resize();
    },
    after: function (currSlideElement, nextSlideElement, options, forwardFlag) {
      resize();
    }
  });

  $('.slideshow').find('img').css("height", "0");
  $('#image').hide().idle(1000).fadeIn();
  resize();
});

$(window).resize(function () {
  resize();
});

function resize() {

  var theheight = window.innerHeight;
  var thewidth = window.innerWidth;

  var imageheight = theheight - 200;

  if (imageheight > 540) {
    imageheight = 540;
  }
  if (imageheight < 300) {
    imageheight = 300;
  }

  var imagewidth = imageheight / 0.6585365;

  $(".slide").css("height", imageheight);
  $(".slide").css("width", imagewidth);
  $(".slide").attr("height", imageheight);
  $(".slide").attr("width", imagewidth);

}

- James

---

你好 - 能否请您发布一个完整的解决方案？我无法弄清楚如何结合这里的源代码来实现调整大小！谢谢！ - Ian Grainger

Answer 1

看起来cycle在第一次调用时储存了幻灯片容器元素的宽度和高度，然后无论你的调整脚本做了什么，都将设置传入的幻灯片为这些尺寸。

我最近也遇到了同样的问题：选项组合

$slideshow.cycle({ 
  containerResize: false,
  slideResize: false,
  fit: 1
});

并且

.yourslide { width: yourwidth !important }

对我有用。关键是fit：1-文档描述的方式使其看起来像我不想要的东西，但它产生了期望的效果。不幸的是，我无法解释。

- RobW

---

也适用于我。 - sepehr

Answer 2

这在类似情况下对我很有用：

$(window).resize(function(){
$('.lr-slider').each(function(){
    newWidth = $(this).parent('div').width()
    $(this).width(newWidth)
    $(this).children('div').width(newWidth)
})
})

需要注意以下几点：

1. .lr-slider是包含幻灯片的div，这是为了支持多个幻灯片而设计的。
2. 在这种情况下，.lr-slider从其父元素中继承宽度，在窗口大小调整事件中我在jQuery中重新创建了它。
3. 所有幻灯片都是没有类或id的div元素。您可能更喜欢将其针对自己的使用进行更加明确的分类，以便可以明确地引用一个类。

- daveyfaherty

Answer 3

这个对你有用吗？

在你的选项中，添加这个：

cssBefore: {  
    top:  0, 
    left: 0, 
    width: wwidth, 
    height: wheight,  
    zIndex: 1  
}

对于调整大小，添加一些变量以匹配在调整大小时设置的变量：

var wheight, wwidth;
function resize() {
  wheight = Math.Min(window.innerHeight - 200, 540);
  wwidth = Math.Min(window.innerWidth, 300) / 0.6585365;
  $(".slide").width(wwidth).height(wheight);
});

不再需要在before:和after:中调用此函数，只需在onload和$(window).resize()中调用一次即可。

- Nick Craver

Answer 4

谢谢Nick，这是朝着正确方向迈出的一步。我已经成功地使用以下代码使其工作。奇怪的是，如果我没有将animIn：height/width设置为与cssBefore中不同的值，则它无法正常工作。对此有什么想法吗？

 $('.slideshow').cycle({ 
    fx: 'custom', 
    speed: 200,
    timeout : 1000,
    pause:  1,
    cssBefore: {  
       left: 0,  
       top:  0,  
       width: imagewidth,  
       height: imageheight,  
       opacity: 0, 
       zIndex: 1 
   }, 
   animOut: {  
       opacity: 0  
   }, 
   animIn: {  
       left: 0,  
       top:  0,  
       width: imagewidth +1,  
       height: imageheight +1,  
       opacity: 1, 
       zIndex: 1  
   }, 
   cssAfter: {  
       zIndex: 0 
   }
});

- James

---

大家好，请为我们这些新手评论你们的代码...我遇到了同样的问题。CssBefore是否可以避免“回到原始大小”的问题？谢谢。 - Peanuts

我通过传统的CSS找到了解决方法，就像这里所解释的那样https://dev59.com/p0_Sa4cB1Zd3GeqP9iTe（你必须添加“！important”声明以避免返回原始大小）。如果您想根据用户的屏幕分辨率调整循环插件的大小，则可以在此处找到另一篇有趣的文章http://css-tricks.com/resolution-specific-stylesheets/。 - Peanuts

你好 - 请问您能否提供一个完整的解决方案？我无法弄清楚如何将这里的源代码组合起来以实现调整大小！谢谢！ - Ian Grainger

Answer 5

无论我尝试插入循环选项中的什么内容（尝试过“100％”或“自动”），都不起作用，因此我通过CSS解决了这个问题。

.slideshowContainer {
    width: auto !important;
}

顺便说一下，100% !important 也可以达到同样的效果。因此，.slideshowContainer 将占用周围元素的100％宽度。

- honk31