8

我正在尝试在带有 jQ​​uery 循环幻灯片的页面上运行 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);

}
4

5 回答 5

18

看起来循环存储幻灯片容器元素的宽度和高度一次，当您第一次调用它时，然后将传入的幻灯片设置为这些尺寸，无论您的调整大小脚本正在做什么。

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

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

和

.yourslide { width: yourwidth !important }

为我工作。关键是适合：1 - 文档描述它的方式使它看起来完全是我不想要的，但它创造了预期的效果。无法解释，很遗憾。

于 2011-06-20T20:13:01.530 回答
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，这是支持多个 sldiesshows 的 amde
  2. 在这种情况下， .lr-slider 从它在 css 中的父元素继承它的宽度，所以我在 jQuery 中的窗口调整大小事件中重新创建它
  3. 幻灯片都是 div 元素，没有类或 id。您可能更愿意让这个更有针对性地供您自己使用，这样您就可以显式地引用一个类。
于 2011-06-16T15:27:34.773 回答
0

这对你有用吗？

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

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 和 in $(window).resize()。

于 2010-02-02T12:25:56.353 回答
0

谢谢尼克，这是朝着正确方向迈出的一步。我设法让它与下面的一起工作。奇怪的是，如果我没有将 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 
   }
});
于 2010-02-02T14:45:56.697 回答
0

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

.slideshowContainer {
    width: auto !important;
}

顺便提一句。100% !important 会做同样的事情。所以 .slideshowContainer 将占用周围元素的 100% 宽度。

于 2012-07-24T10:41:37.203 回答