不同宽度图像的幻灯片脚本居中问题

Question

我正在尝试构建一个幻灯片脚本，它可以处理任何宽度的图像。毫不奇怪，我遇到了一些居中问题，导致纵向模式图像在最初显示时从左侧开始，然后在短暂延迟后立即移动到中心（有点“在狂欢”的感觉）。

我认为解决方案是在图像显示之前获得图像宽度，然后使用它来居中，但我在找到正确执行此操作的可靠代码时遇到了一些麻烦。我已经看到了一些在加载时获取尺寸的示例，但是由于页面（显然）仅在幻灯片开始之前加载一次，这并没有多大帮助。我把它放到了 CodePen 中，任何人都可以查看，并尝试帮助我：

http://codepen.io/Realto619/pen/fhdwK

我也遇到了 getPrev() 和 getNext() 函数在第一次单击时无法正常工作的问题，之后它们工作正常，并且它们似乎在第一次单击时触发，但它们没有在第二次点击之前，它们的设计目的是什么。

提前谢谢...

Answer 1

正如我所怀疑的，问题是由于每张幻灯片的图像尺寸/图像容器没有改变，因此 css 无法在没有准确宽度的情况下将其居中以使 margin:0 auto; 正常工作。

我创建了以下函数，然后在其他每个函数中调用它：

function getDim() {
  iW = $(window).innerWidth();
  iH = $(window).innerHeight();
  natW = $(".fadein img").get(0).naturalWidth; 
  natH = $(".fadein img").get(0).naturalHeight;
  natR = natW/natH; 
  adjH = iH*0.98; 
  adjW = adjH * natR;
  $(".fadein").css('width',adjW);
  $(".fadein img").css('width',adjW);
  $(".fadein img").css('height',adjH);
}

希望这将帮助其他遇到类似问题的人。