Question

我在页面上用左右箭头制作了一个滑块。当它在桌面网站上查看时，宽度为800px，在移动网站上为230px。滑块有一个左右按钮，我希望能够根据宽度左右移动滑块。即如果宽度为800px，我想将它向左和向右滑动800px，并且当它只有230px宽时滑动它。

这是我的jQuery代码：

var calc_width = $('#calc_viewport').width();
$("#calc_next").click(function(){
if($("#calc_container").position().left == -8000 ) 
    {return;}
else { 
    $("#calc_container").animate({
        left: '-=calc_width'
    }, 1000, 'easeOutExpo');
}
});
$("#calc_prev").click(function(){
if($("#calc_container").position().left >= 0 ) 
    {return;}
else { 
    $("#calc_container").animate({
        left: '+=calc_width'
    }, 1000, 'easeOutExpo');
}
});

每个中的第一个if语句确保它在第一张和最后一张幻灯片处停止，因此用户无法继续滑动。目前这根本没有滑动。谁能看到我出错的地方？

Answer 1

对于其中一个是错误的：

left: '+=calc_width'

他们应该是这样的：

left: '+=' + calc_width + 'px'

或者您正在尝试将元素的左侧设置为＆＃39; + = calc_width＆＃39;而不是像100px那样的东西。

因为你按照它的宽度设置calc_container的动画 - 为什么calc_width是从calc_viewport计算出来的？这应该是：

var calc_width = parseInt($('#calc_container').outerWidth());

jQuery通过它的宽度左右动态响应div

1 个答案: