CSS左侧定位不准确

Question

我正在构建一个多屏幕jQuery功能,它本质上是一个幻灯片,每张幻灯片上都有内容.幻灯片位于内嵌块中,并使用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像素宽,我在这里改变了它.

基本上,你只需要找到元素的宽度和间距,然后将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元素之间总是有相同的间距,并且你不想使用静态位置变化,你可以找到它们之间的确切差异,就像我在这个更新的JSFiddle中所显示的那样.)