html空格下滑页面,Ondrag事件在我的HTML页面底部创建了空格

我有一些代码可以检测光标是向左还是向右拖动，这样做会循环显示图像序列(类似于现代创世网站及其旋转车的图像序列)。

然而，evertime函数被调用，它在html页面的底部创建了空格。

知道可能导致这种情况的原因吗？

这是用于将图像序列加载到数组中的Javascript：

var cache = [];

function imgList(base,firstNum,lastNum) {

var imageFunction;

for(var i = firstNum;i <= lastNum; i++) {

imageFunction = new Image();

if(i <=9){ var EXT = '000'}

else if(i <= 99){var EXT = '00'}

else if(i <= 999){var EXT = '0'}

else{var EXT = ''}

imageFunction.src = base + "." + EXT + i + ".png";

cache.push(imageFunction);

console.log(cache.length);

}

}

以下是发生拖动事件时调用的Javascript函数：

var prevX = -1;

var i = 0;

var drgleft = 0;

var drgright = 0;

function sequence(event){

if(prevX == -1){

prevX = event.pageX;

return false;

}

//drag left

if(prevX > event.pageX){

console.log('dragged left');

drgleft++;

if(drgleft == 2){

drgleft = 0;

i--;

if(i < 0){

i = 30; //for optimization reasons, input the cache.length value manually (this avoids unnecessary errors in the console and laggy framerate as a result).

}

document.getElementById("TheBigOne").src = cache[i].src; //use console.log(i); as a method of verifying that the code is executing correctly

}

}

else if(prevX < event.pageX){

console.log('dragged right');

drgright++;

if(drgright == 2){

drgright = 0;

i++;

if(i > 30){ //for optimization reasons, input the cache.length value manually (this avoids unnecessary errors in the console and laggy framerate as a result).

i=0;

}

document.getElementById("TheBigOne").src = cache[i].src;

}

}

else{}

prevX = event.pageX

}

这是html：