position(）返回始终相同的位置

jQuery .position() returns always same position

本文关键字：位置 返回 position      更新时间：2023-09-26

我正在jQuery中使用一个带有（左、右）按钮的简单图像滑块。我通过单击左右按钮来左右设置div位置的动画，但在图像的末尾，我的滑块走得更远。所以我需要检查图像的末尾在哪里才能阻止它

我试着用.position（）检查滑块div来实现这一点，但它总是在我的console.log中返回相同的位置。

如果我得到了#gallery_slider的正确位置，我如何检查它是在溢出#gallery_sliderelement的末尾还是开头？

我做了一个jsFiddle：http://jsfiddle.net/ah6yb7bf/1/

我的jQuery：

var slide       = $('#gallery_slider .gallery-image');
var slideWidth  = parseInt(slide.width());
var slideMargin     = parseInt(slide.css('margin-right'));
var slides      = $(slide).length;
var sliderWidth     = (slideWidth + slideMargin) * slides;
var pos             = $('#gallery_slider').position();
$('#gallery_slider').css('width', sliderWidth+'px');
$('#product_gallery .gallery-arrow').click(function() {
    var direction = $(this).attr('data-direction');
    var slider = $('#gallery_slider');
    console.log(pos.left);
    if(direction == 'left') {
        slider.animate({
            'left': '-=' + '200px'
        }, 200);
    } else {
        slider.animate({
            'left': '+=' + '200px'
        }, 200);
    }
});

HTML:

<div class="wrapper">
    <span id="arrow_left" class="gallery-arrow blue-ui" data-direction="right">
        <span></span>
    </span>
    <div id="gallery_frame">
        <div id="gallery_slider">
            <a class="gallery-image" rel="group" href="#"><img width="140" height="140" src="http://www.tuinkrant.com/plantengids/bolgewassen/tulpen/thumbs/White%20Dream.jpg"/></a>
            <a class="gallery-image" rel="group" href="#"><img width="140" height="140" src="http://www.tuinkrant.com/plantengids/bolgewassen/tulpen/thumbs/White%20Dream.jpg"/></a>
            <a class="gallery-image" rel="group" href="#"><img width="140" height="140" src="http://www.tuinkrant.com/plantengids/bolgewassen/tulpen/thumbs/White%20Dream.jpg"/></a>
        </div><!--End #gallery_slider-->
    </div><!--End #gallery_frame-->
    <span id="arrow_right" class="gallery-arrow blue-ui" data-direction="left">
        <span></span>
    </span>
</div><!--End .wrapper-->

http://jsfiddle.net/ah6yb7bf/2/你需要放

var pos= $('#gallery_slider').position();

内部点击功能。因为当它等于0时，您会在页面加载时检查它；移动后，您需要再次检查。

相关文章：