Question

我正在使用jQuery中的（左，右）按钮创建一个简单的图像滑块。我通过单击左右按钮左右动画div位置，但在图像的末尾我的滑块更进一步。所以我需要检查图像的结尾在哪里停止它。

我尝试通过使用 .position（）检查滑块div来执行此操作但它总是在我的console.log中返回相同的位置。

如果我找到 #gallery_slider 的正确位置，我该如何检查它是否在溢出 #gallery_slider 元素的末尾或开始？

我做了一个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-->

Answer 1

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

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

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

jQuery .position（）总是返回相同的位置

1 个答案: