下面的代码是对我正在尝试做的事情的总结，即开发一个允许用户左右滚动图像的界面。图像从屏幕开始，然后到中心，它还将前一个图像推回屏幕。
我会喜欢一些关于我拥有的代码的建议或关于如何做得更好的建议。显然，如果用户快速点击箭头，无疑会破坏脚本，所以我需要帮助。也许在“加载”状态下阻止箭头被点击？
我还应该提到 backgroundLoad 预加载下一个和上一个图像。当我说“屏幕外”时，它将动画到中心。我不是在寻找图片库/灯箱解决方案。这个问题更多的是关于预加载过程。
var imgArray=[];
var b = 0;
function loadImage(ini){
b = ini;
//preload image
var num_loaded = 0;
imgArray[ini] = new Array();;
for(var i=0;i<2;i++){
imgArray[ini][i] = new Image();
imgArray[ini][i].onload = function(){
num_loaded++;
if(num_loaded == 1){
}
if(num_loaded == 2){
//do something
backgroundLoad(ini+1);
}
}
imgArray[ini][i].src = ArrayOfFiles[ini][i];
}
}
function backgroundLoad(ini){
var num_loaded = 0;
imgArray[ini] = new Array();;
for(var i=0;i<2;i++){
imgArray[ini][i] = new Image();
imgArray[ini][i].onload = function(){
num_loaded++;
if(num_loaded == 2){
// loaded
}
}
imgArray[ini][i].src = ArrayOfFiles[ini][i];
}
}
$("div#arrow-left").click(function(){
loadImage(b+1);
});
$("div#arrow-right").click(function(){
loadImage(b-1);
});