Question

我正在尝试创建jQuery Cycle幻灯片，其中不同大小的图像垂直和水平居中，并且还可以根据窗口大小重新调整大小。其中一些是直接css但我需要动态调整每个图像上的“顶部”，“左侧”，“边距顶部”和“边距左侧”，然后才能在幻灯片的第一张图像中淡入淡出。

因此，我认为需要创建一个回调，其中在图像出现之前设置尺寸和边距。无法找出最佳方法。

CSS很简单。基本上：

#gallery img {
 max-height: 100%;
 position:absolute;
 display:none;
 }

.js的粗略剪辑是：

$(window).bind("load resize", function() {
      $('#gallery img').each(function(i) {
        var ih = $(this).height();
        var iw = $(this).width();
        var fh = Math.ceil(ih / 2);
        var fw = Math.ceil(iw / 2);
        $(this).css({
          'top' : '50%',
          'left' : '50%',
          'margin-top' : '-' + fh + 'px',
          'margin-left' : '-' + fw + 'px'
        });
      },function() {
      $('#gallery img:first').fadeIn(3000, function() {
      $('#gallery').cycle();
   });

但是我没有看到预期的结果。在计算和定位发生之前，第一个img的fadeIn触发。

认为'display：none'可能会混淆一些事情（也许什么都没有计算，直到'显示：阻止'，我尝试过使用：

#gallery img:first-child {
  display:block;
  opacity:0;
  }

..然后动画制作完全不透明度而不是fadeIn - 但结果是一样的。

我做错了什么？

Answer 1

我不完全确定你的代码试图做什么，但我打赌问题可能在事件和循环逻辑中更多。您的代码读起来就好像您在调整大小后尝试重新显示第一张图片一样，不确定我是否误解了您的意图。

也许拆分调整大小和画廊循环逻辑可能有助于保持代码更清晰;这会在调整大小时调整图像大小，并在加载时启动图库：

$(document).ready( function() {

function resizeThem() {
     $('#gallery img').each(function(i) {
        var ih = $(this).height();
        var iw = $(this).width();
        var fh = Math.ceil(ih / 2);
        var fw = Math.ceil(iw / 2);
        $(this).css({
          'top' : '50%',
          'left' : '50%',
          'margin-top' : '-' + fh + 'px',
          'margin-left' : '-' + fw + 'px'
        });
      });
}

$(window).bind("resize", resizeThem);

$(document).bind("load", function () {
    resizeThem();
      $('#gallery img:first').fadeIn(3000, function() {
         $('#gallery').cycle();
      });   
});

}）;

请注意，调整大小事件在不同浏览器中的行为方式有所不同。此外，调整所有图像的大小似乎过分了。如何在显示器上调整图像大小然后依次调整图像大小时根据浏览器大小显示图像。

使用窗口大小调整功能附加回调的最佳方法

1 个答案: