jquery - CSS 左定位不准确

Question

我正在构建一个多屏幕 jQuery 功能，它本质上是一个幻灯片放映，每张幻灯片都有内容。幻灯片位于内联 block 中，并使用 css 的 left 属性移动。然而，定位不准确，导致载玻片在移动时逐渐偏离位置。我删除了动画以便更清楚地显示转变。看这里:

var curr = 0;

$('.next').on('click', function(){
    curr++;
    $('.items').css('left', (curr*-140) + 'px')
})

$('.back').on('click', function(){
    curr--;
    $('.items').css('left', (curr*-140) + 'px')
})

http://jsfiddle.net/S8pdH/1/

如有任何帮助，我们将不胜感激!

Answer 1

您只是将元素移动了元素宽度的量，但忽略了元素之间的空间。

元素之间的间距是 4 像素宽，我在 your fiddle here 中更改了它.

基本上，您只需找到元素的宽度和间距，然后将 div 向左移动相应的量。

$('.next').on('click', function(){
    var distanceBetweenDivs = ($($(".item")[1]).offset().left - ($($(".item")[0]).offset().left)); //144

    curr++;
    $('.items').css('left', (curr*-distanceBetweenDivs)+ 'px')
})

$('.back').on('click', function(){
    var distanceBetweenDivs = ($($(".item")[1]).offset().left - ($($(".item")[0]).offset().left)); //144

    curr--;
    $('.items').css('left', (curr*-distanceBetweenDivs) + 'px')
})

(编辑:如果你总是在 .item 元素之间有相同的间距并且你不想使用静态位置变化，你可以找到它们之间的确切区别，正如我在this updated JSFiddle .)