Strange js поведение галереи изображений

Question

Привет, я хотел бы создать галерею изображений с чистым javascript и нашел неплохой подход http://www.trans4mind.com/personal_development/JavaScript/imageSlideShow.htm.

Однако, он не работает должным образом. Несмотря на то, что мне удалось связать мои кнопки «Next/Back», чтобы переключать изображения в массиве, второе изображение будет отображаться только на долю секунды, прежде чем возвращаться к исходному изображению.

Есть ли что-то в 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); 
}); 

Благодарим за любые полезные советы. И КСТАТИ: Firebug говорит мне следующее в консоли:

Image коррумпированной или усеченной:

Наконец, приведенный выше кодом является максимальной степенью Дж.С. я могу иметь дело с в данный момент относительно моего тока уровня знаний и опыта. Поэтому, пожалуйста, подумайте об этом, отвечая на вопрос

Answer 1

Похоже, что разметка ваших тегов ссылок() поднимет или, возможно, перезагрузит страницу, - которая вернет галерею назад к изображению # 1. Попробуйте добавить # в HREF атрибута вашей ссылки разметки (для обозначения их в качестве якорей) или просто утончаются изменить их теги

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

здесь измененный JSFiddle, что, кажется, работает хорошо http://jsfiddle.net/Nf7yR/1/

И вот версия, которая использует пробелы; к тому же эффекту: http://jsfiddle.net/Nf7yR/2/