Question

我希望你能为我澄清一些事情

我正在研究旋转木马，发现了一个很好的旋转木马并在我的代码中复制了

作为参考，这是我看过的那个，它非常好且易于理解

https://tutsplus.com/lesson/the-obligatory-slider/

无论如何，我已经实现了这一点，我认为我自己做了自己的控制器，所以我抓了几张图片并将它们放在容器内，并附上图片（附上截图供参考）。

让我们看看一些代码。

这是HTML结构。 carouselWrapper div包含图像和控制器

<body>
<!-- carousel -->
<div class="carouselWrapper">
<ul>
<li><img src="image1.jpg"></li>
<li><img src="image2.jpg"></li>
<li><img src="image3.jpg"></li>
<li><img src="image4.jpg"></li>
</ul>
<div class="sliderNav">
<button data-dir="prev" class="left transparent"></button>
<button data-dir="next" class="right transparent"></button>
</div>
</div>

<!-- end of carousel -->

</body>

以下是相关的CSS：

没有任何参与，carouselWrapper默认position:static。

.carouselWrapper{
    width:500px; /*size of the pix*/
    /* height:375px; */
    overflow:hidden;
    margin:0 auto;
}

.carouselWrapper ul{
    list-style-type: none;
    width:10000px;  

}
 .sliderNav button.right{
    background:url("controllersRight.jpg") no-repeat 0 0;
    width:48px;
    height:39px;
}
.sliderNav button.left{
    background:url(controllersLeft.jpg) no-repeat 0 0;
    width:48px;
    height:39px;
}
 .sliderNav button.left, .sliderNav button.right{
    position:absolute;
    border:0;
}

以下是定位两个控制器的脚本的相关部分。

再一次，没什么特别的：我得到了我需要的所有宽度和高度，然后更新两个控制器的顶部和左侧值。

/*positioning the controllers*/
    var containerWidth = $(".carouselWrapper").width();//get width of
    var containerHeight = $(".carouselWrapper").height();
    var controllerWidth = $(".sliderNav button").width();
    var controllerHeight = $(".sliderNav button").height();
    var $controllerPrev = $("button.left"); 
    var $controllerNext = $("button.right");
    var imageContainerPosLeft = $(".carouselWrapper").offset().left;
    var imageContainerPosTop = $(".carouselWrapper").position().top;
    var controllersTop = (containerHeight / 2) - controllerHeight;
    var controller1Left = imageContainerPosLeft;
    var controller2Left = (imageContainerPosLeft + containerWidth ) - controllerWidth ;
    //set the position of the two controller dynamically
    $controllerPrev.css({
        "top":controllersTop,
        "left":controller1Left      
    });
    $controllerNext.css({
        "top":controllersTop,
        "left":controller2Left
    });

    console.log("width of picture container is " + containerWidth + " controller width " + controllerWidth + " left pos is  "+ imageContainerPosLeft + " top pos is " + imageContainerPosTop + " container height " + containerHeight + " new controller top position: " +  controllersTop + " controller1 left pos is " + controller1Left + "second controller left pos is " + controller2Left + " controller height is " + controllerHeight);

我想提请你注意这一行：

var imageContainerPosLeft = $(".carouselWrapper").offset().left;

我在这里使用offset()并且它在每个浏览器中都能正常运行，但我的第一选择是position().left。

当我使用position()时，我注意到只有Firefox，IE7和8以及Opera工作正常。 Safari，Chrome，IE9和10弄得一团糟，控制器被移到页面左侧。

我运行了一些控制台日志，发现罪魁祸首实际上是position().left，它返回的值为0，我期待像710px这样的东西。

所以我用offset().left替换它，现在每个浏览器都可以。现在，我查看了两种方法的API，并说它

.position（）方法允许我们检索元素相对于偏移父元素的当前位置。

有趣的是，carouselWrapper的父级是没有声明明确位置的正文标记。

所以我的问题是：

1）这就是定位方法失败的原因吗？

2）如果是这样，为什么它只在某些浏览器中失败而在其他浏览器中失败？我的意思是即使是IE7和8也是正确的！

3）作为替代方案，不是使用offset().left修复问题，而是可以通过在正文标记中添加position:relative来修复问题吗？

offset（）。left vs position（）。left

0 个答案: