尝试使用jquery循环幻灯片调整窗口大小

我试图在带有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);

}

$（文档）.ready（函数（）{
$（'.slideshow'）。循环({
外汇：“淡出”，
速度:200,，
超时：1000，
暂停：1，
before:函数（currSlideElement、nextSlideElement、options、forwardFlag）{
调整大小（）；
},
之后：函数（currSlideElement、nextSlideElement、options、forwardFlag）{
调整大小（）；
}
});
$（'.slideshow'）.find（'img'）.css（“高度”，“0”）；
$（'#image'）.hide（）.idle（1000.fadeIn（）；
调整大小（）；
});
$（窗口）。调整大小（函数（）{
调整大小（）；
});
函数resize（）{
var theheight=window.innerHeight；
var thewidth=window.innerWidth；
var imageheight=高度-200；
如果（图像高度>540）{
图像高度=540；
}
如果（图像高度<300）{
图像高度=300；
}
var imagewidth=imageheight/0.6585365；
$（“.slide”）.css（“高度”，图像高度）；
$（“.slide”）.css（“宽度”，图像宽度）；
$（“.slide”）.attr（“高度”，图像高度）；
$（“.slide”）.attr（“宽度”，图像宽度）；
}

这对你有用吗

在选项中，添加以下内容：

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

对于resize，添加几个变量以匹配在resize上设置的变量：

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);
});

---

无需在

之前：

和

之后：

再调用此函数，只需在

$（窗口）中加载一次即可。resize（）

谢谢Nick，这是朝着正确方向迈出的一步。我设法让它与下面的人一起工作。奇怪的是，如果我没有将animIn:height/width设置为与css中不同的值，它就不起作用了。在此之前：有什么想法吗

 $('.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 
   }
});

---

这在类似的情况下对我有效：

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

注意事项：

.lr slider是包含幻灯片的分区，这是支持多个sldieshows的amde

在本例中，.lr slider从css中的父元素继承了它的宽度，所以我在jQuery中对一个窗口调整大小事件重新创建了它

幻灯片都是div元素，没有类或id。您可能更愿意将其设置为自己使用的目标，以便可以显式引用类

---

看起来cycle在您第一次调用幻灯片容器元素时会将其宽度和高度存储一次，然后将传入的幻灯片设置为这些尺寸，而不管调整大小脚本执行什么操作

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

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

及

---

为我工作。关键在于它的适用性：1--文档描述它的方式使它看起来完全像我不想要的，但它产生了预期的效果。不幸的是，无法解释。

无论我在循环中插入了什么，选项对我有效（尝试了“100%”或“自动”），所以我通过css解决了这个问题

.slideshowContainer {
    width: auto !important;
}

---

顺便说一句，100%！重要人物也会这样做。因此.slideshowContainer将占据周围元素的100%宽度。

大家好，请为我们评论一下您的代码新手。。。我也陷入了同样的问题。CssBefore是否避免了“恢复到原始大小”的事情？谢谢。我找到了使用传统CSS的方法，就像这里解释的那样（你必须添加“！important”声明以避免返回原始大小）。另一篇有趣的文章，如果你想根据用户的屏幕分辨率调整cycle插件的大小，可以在这里找到-请你发布一个完整的解决方案？我不知道如何在这里合并源代码来调整大小！谢谢您好-请您发布完整的解决方案好吗？我不知道如何在这里合并源代码来调整大小！谢谢也为我工作。

.slideshowContainer {
    width: auto !important;
}