My javascript function runs in duplicate(?) when I add click event

The issue you are having is the synchronisation between the animation time and the click triger. Also you are not cancelling the next scheduled action when a user click on the button. supose we are on slide 2 meaning there is already a timer that is supossed to show slide 3, when i click on button 1 the first timer will keep runig to show slide 3 and another timer will be created to show slide 1. I solve this by holding the timer and clearing it.

Another issue is that in your adnimation: fadeIn callback you are adding the click lisiner for button which I think will add many listiners so when you click twice you will have the same listner attached twice therefore called twice when trigered. Here is my correction works on my side . might have other issues . Bear in ming the timing between click and transition. for instance if you set fadeIn time to the same time of setTimeout you will have the same issue.

$(function () {
//edit
var timer='undefined';

var slides = new Array();
    slides[0] = 'http://i.imgur.com/UwRVo.png';
    slides[1] = 'http://i.imgur.com/wv08B.png';
    slides[2] = 'http://i.imgur.com/MlUbx.png'; 

   var max = $(slides).length;

var isBottom = false;

makeSlideBtns(max);

if(max>0) 
{
    LoadSlide(0,max);

}

function LoadSlide(index,max) {
     clearTimeout(timer);
     if(index<max)
        {
            var el0 = $("#slidebottom");
            var el1 = $("#slideover");
            var sbtn = $("#slidebtns li")[index];
            var img = new Image();
             $(sbtn).css('background-color', '#000'); 

            $(img).load(function () {
                $(this).css('display','none');
                if(isBottom == true)
                { 
                    $(el1).html(this);
                    $(el1).css('z-index', '3');
                    $(el0).css('z-index', '2');
                    console.log("el1 " + index);

                } else {
                    $(el0).html(this);
                    $(el1).css('z-index', '2');
                    $(el0).css('z-index', '3');
                    console.log("el0 " + index);

                }
                isBottom = !isBottom;

                function nextSlide () {                                                                      
                                LoadSlide(index+1,max);
                                console.log("sbtn: " + sbtn);
                                $(sbtn).css('background-color', '#fff');
                };

                $(this).fadeIn(2000,function() {
                        timer=setTimeout(nextSlide, 5000);     
                });


            }).error(function () {             
                LoadSlide(index+1,max);
            }).attr('src', slides[index]);  

        } else {
            LoadSlide(0,max)
        }
}

function makeSlideBtns (max) {

    for(i=0; i<max; i++) {
        var num = i + 1;
        $("#slidebtns").append('<li><a>' + num + '</a></li>');
    }
};

//add this in your loop will add more as you click
$("#slidebtns li").click(function () { 
     $("#slidebtns li").css('background-color', '#fff');                                               
     var i=$(this).index();             
      LoadSlide(i,max);
      return false;
  });

});​