Javascript 图像库的奇怪行为

大家好，我想用纯javascript构建一个图像库，并找到了一个很好的方法

然而，它并没有像预期的那样工作。尽管我成功地链接了“下一步/上一步”按钮以切换阵列中的图像，但第二个图像在恢复到初始图像之前只会出现几秒钟

js里有什么乱七八糟的吗

currentIndex = 0;

MyImages = new Array();

MyImages[0] ="images/sampleimage.jpg";
MyImages[1] ="images/kuh.jpg";


function preload()
{
    for (var i=0;i<MyImages.length;i++){
        var imagesPreloaded = new Image();
        imagesPreloaded.src = MyImages[i];
    }
}

preload();


function Nexter(){
if (currentIndex<MyImages.length-1){
    currentIndex=currentIndex+1;
    document.theImage.src=MyImages[currentIndex];
}
else {
    currentIndex=0;
    document.theImage.src=MyImages[currentIndex];
}
}

function Backer(){
if (currentIndex>0){
    currentIndex=currentIndex-1;
    document.theImage.src=MyImages[currentIndex];
}
else {
    currentIndex=1;
    document.theImage.src=MyImages[currentIndex];
}

}

$("#nav_left").on("click",function(){
    Nexter();
});

$("#nav_right").on("click",function(){
    Backer();
});



//
//img Gallery
//


$(".gallery_nav img").on("mouseover", function (){
    $(this).css("opacity", 0.8);    
});

$(".gallery_nav img").on("mouseleave", function (){
    $(this).css("opacity", 0.1);
});

currentIndex=0；
MyImages=新数组（）；
MyImages[0]=“images/sampleimage.jpg”；
MyImages[1]=“images/kuh.jpg”；
函数预加载（）
{
对于（var i=0；i看起来您的链接标记（）的标记正在顶起或可能正在重新加载页面-这会将图库重置为图像#1。尝试在链接标记的href属性中添加一个#（将它们表示为锚定），或者干脆将它们更改为标记

Example
    <a href="#" class="gallery_nav" id="nav_left"><img src="images/pfeil_links.svg" alt="First image"></a>

示例

这是一个经过修改的JSFIDLE，似乎可以正常工作

这是一个使用跨距的版本；具有相同的效果：
如果你能为你的问题创建一个示例/演示，这可能有助于回答你的问题Hanks Dogoferis，好主意第一张图片是一个彩色的自然物体（lorem像素），第二张图片应该显示灰色的运动场景（lorem像素）同样的效果：它只会在毫秒内显示第二张图片。顺便说一句，箭头按钮被低透明度的alt文本所取代，所以你必须仔细寻找下一个/后把手Swow Dogoferis…这太神奇了。有人是怎么想到这个主意的？这是唯一的经验还是更广为人知的事情？谢谢你：-)还有一点：第二张图片在加载时延迟了几分之一秒，尽管我以为我已经预加载了图片。它与lorem pixel的URL配合得很好，延迟只发生在从相对路径加载时。对此有什么建议吗？如果我理解正确，你是说有基本的从Lorem Pixel加载时没有延迟，但从相对路径加载第二个图像时有轻微延迟…我假设这意味着在您的开发环境/服务器上有一个图像。如果是这样，则可能是多种情况，包括Lorem Pixel，其缓存设置比您的本机开发环境更好。