MouseEnter上的JQuery Image Slider

Question

我遇到的问题是我的图像会在mouseleave上旋转回第一张图像并重置活动状态。它可以在没有鼠标事件的情况下工作，但我需要它只在悬停时通过图像并在有人离开div区域时重置。当我添加了mouseleave事件时，它将停止但不会正确重置并仍然可以查看图像。

var cur = 0;
var count = $('.slider_item').length;

$('.slider_item').hide();
$('.slider_item').eq(0).show();
$('.image-container').mouseenter( function() {
setInterval(function() {    
    $('.slider_item').eq(cur).slideToggle(function () {
        $(this).removeClass('active');
        cur = (cur + 1) % count;
        $('.slider_item').eq(cur).addClass('active').slideToggle('slow');
	});
}, 5000);
$('.image-container').mouseleave( function() {
			$('.slider_item').removeClass('active');
			$('.slider_item').eq(0).show();
			
		});

});
});

.image-container {
width:84px;
height:115px;
overflow:hidden;
position:relative;
margin:0 auto;}


.image-container img {
     position:relative;
}

 <div class="image-container">
            <a href="/"><img class="slider_item active"src="image01.png" width="84" height="115" />
            <img class="slider_item" src="image02.png" width="84" height="115" />
            <img class="slider_item" src="image03.png" width="84" height="115" />
            <img class="slider_item" src="image04.png" width="84" height="115" />
            <img class="slider_item" src="image05.png" width="84" height="115" />
            <img class="slider_item" src="image06.png" width="84" height="115" />
            <img class="slider_item" src="image07.png" width="84" height="115" />
            <img class="slider_item" src="image08.png" width="84" height="115" />
            <img class="slider_item" src="image09.png" width="84" height="115" /></a>
           </div><!-- end image-container-->