Question

我尝试制作幻灯片脚本可以处理任何宽度的图像。不出所料，我有一些中心问题导致肖像模式图像在最初显示时从左侧开始，然后在短暂延迟后立即移动到中心（给它一点＆＃34） ;在狂欢节拍摄鸭子＆＃34;感觉）。

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

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

我也遇到问题，getPrev()和getNext()功能无法在第一次点击时工作，之后它们工作正常，而且它们似乎是在首次点击时触发，但在第二次点击之前，他们不会做他们设计的事情。

提前致谢...

Answer 1

正如我所怀疑的那样，问题是由于每张幻灯片的图像尺寸/图像容器没有变化，因此css无法使margin:0 auto;的准确宽度无法正常工作。< / p>

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

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

希望这可以帮助其他有类似问题的人来到这里。

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

1 个答案: