0

我有一个内容幻灯片：

幻灯片容器
|--> 包装器
|------> slide1、slide2 等。

这就像计算包装器的位置 X 和幻灯片的位置 X 一样简单，以确定在哪里滑动包装器以便下一张/上一张幻灯片显示在容器的视口中。这很简单。

对于 Firefox 和 Chrome，我使用 CSS3 transform 和 transition-duration 来为幻灯片制作动画。一切都很完美。几乎。

问题只是当我非常快地单击下一步按钮时。我正在使用 jQuery 的

$(selector).position().left

读取幻灯片的位置 X（左）并且位置变为0（而不是预期的，例如 300 像素）。我确实有一个标志 isAnimating 以防止用户走得太快，但这也无济于事。它确实可以防止滚动内容过快，但左侧位置可能仍为0，就好像其他原因导致它无法确定一样。

我做了一个简短的搜索，发现如果正在加载图像，一些浏览器将无法确定它的位置，直到加载结束。但是，每张幻灯片都有一个图像，但在其中。幻灯片的 CSS 似乎所有宽度和边距都设置得很好。

问题是为什么会根据我描述的场景发生这种情况，以及可能有什么可以改进的地方来确定 Firefox、Chrome 浏览器的位置 X？

4

1 回答 1

0

我已经决定，如果offsetLeft对我来说始终不可靠，我可以使用元素的宽度及其在容器中的索引位置来确定位置 X

var newWrapperPos = undefined;
$(lotWrapper).children('div').each(function(index){
        if($(this).attr("id") === "slot"+id){
            var width = $(this).width();
            newWrapperPos = index * width;
            return false;
        }
    }); 
//now I can shift wrapper to position = newWrapperPos

抱歉，我无法共享代码 - 撕掉所有涉及的功能有点费时。但如果有人有更好的答案，请告诉我。现在这对我来说很好。

于 2012-09-27T17:36:52.933 回答