带按钮的jQuery滑块是错误的

Question

这是html：

<div id = "slideshow">
  <div id="slideshowWindow">
    <div class="slide"><img src="slideshow.jpg" alt="" /></div>
  <div class="slide"><img src="DSC_8185.jpg" alt="" /></div>
  <div class="slide"><img src="DSC_8211.jpg" alt="" /></div>
  <div class="slide"><img src="OrganicSoilad.jpg" alt="" /></div>
  <div class="slide"><img src="DSC_8243.jpg" alt="" /></div>
  <input style = "display: none;"  value = "" id="hide"/>
</div>

除了prev（）按钮外，一切似乎都能正常工作。如果你不止一次点击它就会出错。它得到了所有的错误。我对jquery比较陌生，如果有人对如何在悬停时阻止滑块滑动有任何见解，这也会有所帮助。

javascript：

$(document).ready(function() { 
    $(".content").mouseenter(function(){
        $( ".arrows" ).fadeIn(100);
    });

    $('.content').mouseleave(function(){
        $( ".arrows" ).fadeOut(700);

    });

    var currentPosition = 0;
    var $hide = $('#hide');
    $hide.val(currentPosition);
    var slideWidth = 1140; 
    var slides = $('.slide'); var numberOfSlides = slides.length; var slideShowInterval; 
    var speed = 5000; slideShowInterval = setInterval(changePosition, speed); 
    slides.wrapAll('<div id="slidesHolder"></div>'); 
    slides.css({ 'float' : 'left' }); 

    $('#slidesHolder').css('width', slideWidth * numberOfSlides); 

    function changePosition() { 
        currentPosition = $('#hide').val();

        if(currentPosition == numberOfSlides - 1)
        {
             currentPosition = 0; $hide.val(currentPosition); 
        } else { 
             currentPosition++; $hide.val(currentPosition); 
        } 
        moveSlide();
    } 

    function moveSlide() { 
         $current = $('#slidesHolder').css('padding-left');
         $current_num  = $current.replace('px' , '');
         $padding = $current_num;      
        $('#slidesHolder').animate({'paddingLeft': $padding});
       /* alert($padding);   */
        /*alert($('#slidesHolder').css('padding-left')); */
        $('#slidesHolder').animate({'marginLeft' : slideWidth*(-currentPosition)}); 
        $('#media').html(currentPosition);

    }
});
function next()
{   
    currentPosition = $('#hide').val();
    slideWidth = 1140;
    ++currentPosition; if(currentPosition > 4){currentPosition =0;}
    $('#slidesHolder').animate({'marginLeft' : slideWidth*(-currentPosition)});

    $('#hide').val(currentPosition) 
    $('#media').html(currentPosition); 
}

function prev()
{
    currentPosition = $('#hide').val();
    slideWidth = 1140;
     $left = 1140;
     if(currentPosition == 0)
     {

     currentPosition = 5;
     }
     else
     {
     if($('#slidesHolder').css('padding-left') == '1140px')
     {
         $left = $left + $left;
     }

    $('#hide').val(currentPosition); 

    $('#slidesHolder').animate({'paddingLeft' : $left});


    if(currentPosition == 0)
    {
        currentPosition = 4;
    }
    else{
        --currentPosition; 
    }

    $('#hide').val(currentPosition); 

    $('#media').html(currentPosition);
     }
}