jQuery背景图像闪烁和边距问题

我试图从头开始重建我的个人投资组合网站，主要是为了jQuery实践，我才刚刚开始，但有两个问题

首先，这里有一个链接，指向我迄今为止的预览：

基本上，我的想法是，每隔一次导航点击，就会有带有div的大背景图像滚动到视图中。当divs滚动时，背景图像会发生变化。但是，我还希望通过break_size函数动态调整div的大小，这就是我遇到的问题。该函数对于设置每个div的大小非常有用，即使在调整大小时也是如此，但由于某些原因，间距是关闭的。第一个显示很好，然后后面的每个显示都太高：

function break_size() {
    var windowY = $(window).height();   
    var breakHeight =(94 * windowY) / 100;

    var marginY = ((windowY - breakHeight)/2);

    $('.break').css('height', breakHeight);
    $('.break').css('margin-top', marginY + windowY);
    $('.break').css('margin-bottom', marginY);
}

因此，除非我遗漏了什么，否则这段代码应该将每个.break div的高度设置为窗口高度的94%，将marginY变量设置为（窗口高度-break height）/2（一半为顶部，一半为底部），然后将底部边距设置为marginY，将顶部边距设置为marginY加上窗口高度（有效地将每个div间隔一个窗口高度，允许完整的背景图像显示在div之间）

我遇到的另一个问题是图像之间的闪烁。我添加了e.preventDefaults（），但没有运气

有人知道那里发生了什么吗？提前谢谢！

var image\u url='url（images/image1.jpg）；

第15行输入错误，缺少括号

你的计算是准确的，但是css有些地方不起作用。元素的位置不正确。看起来每个元素的底部边距都不会影响它下面的边距。 我无法找出原因，但我找到了一个解决方法，将底部边距添加到其他元素的顶部：

$('.break').css('height', breakHeight);
//remove bottom margin, use extra top margin instead
$('.break').css('margin-top', marginY + marginY + windowY); 
//normal margin for first child
$('.break:first-child').css('margin-top', marginY + windowY);

理论上，这可以在你的设置，但我没有测试它

至于闪烁，我也可能是错误的，所以让我知道，但它看起来像是你正在改变背景图像时，按钮被按下。改变背景图像单独将导致这一点，但它也不需要改变每次按钮被点击。你应该改为堆栈图像和改变visibi堆叠图像的完整性，这样可以预加载图像。然后，仅在需要时交换图像