不能一起工作的javascript和jQuery动画

Question

我有一个jQuery滑块，每4秒显示一个不同的图像，我已经添加了3个按钮，一旦悬停每个按钮将显示不同的图片，但问题是如果我不悬停任何按钮的幻灯片工作正常，但如果我这样做卡住并开始循环我应该显示的图像

这是滑块代码

    $(document).ready(function(){
    $('.pic').hide();
    i=1;
    function slider(){

    $('#pic-'+i).fadeIn('0').delay(1000).fadeOut('0',function(){
    i=i+1;if(i==6){i=1;}slider();

    });

    }
    slider();
    });

悬停代码

/* Slide 1 */
function show1(){
    document.getElementById("tes-1").src = "img/1.jpg"
    document.getElementById("tes-2").src = "img/1.jpg"
    document.getElementById("tes-3").src = "img/1.jpg"
    document.getElementById("tes-4").src = "img/1.jpg"
    document.getElementById("tes-5").src = "img/1.jpg"
}
function show2(){
    document.getElementById("tes-1").src = "img/2.jpg"
    document.getElementById("tes-2").src = "img/2.jpg"
    document.getElementById("tes-3").src = "img/2.jpg"
    document.getElementById("tes-4").src = "img/2.jpg"
    document.getElementById("tes-5").src = "img/2.jpg"
}
function show3(){
    document.getElementById("tes-1").src = "img/3.jpg"
    document.getElementById("tes-2").src = "img/3.jpg"
    document.getElementById("tes-3").src = "img/3.jpg"
    document.getElementById("tes-4").src = "img/3.jpg"
    document.getElementById("tes-5").src = "img/3.jpg"
}
function show4(){
    document.getElementById("tes-1").src = "img/4.jpg"
    document.getElementById("tes-2").src = "img/4.jpg"
    document.getElementById("tes-3").src = "img/4.jpg"
    document.getElementById("tes-4").src = "img/4.jpg"
    document.getElementById("tes-5").src = "img/4.jpg"
}
function show5(){
    document.getElementById("tes-1").src = "img/5.jpg"
    document.getElementById("tes-2").src = "img/5.jpg"
    document.getElementById("tes-3").src = "img/5.jpg"
    document.getElementById("tes-4").src = "img/5.jpg"
    document.getElementById("tes-5").src = "img/5.jpg"
}

最后他们参与了html

            <div class="pictures">
                <div class="pic" id="pic-1">
                    <img src="img/1.jpg" id="tes-1" name="tes-1">
                </div>
                <div class="pic" id="pic-2">
                    <img src="img/2.jpg" id="tes-2" name="tes-2">
                </div>
                <div class="pic" id="pic-3">
                    <img src="img/3.jpg" id="tes-3" name="tes-3">
                </div>
                <div class="pic" id="pic-4">
                    <img src="img/4.jpg" id="tes-4" name="tes-4">
                </div>
                <div class="pic" id="pic-5">
                    <img src="img/5.jpg" id="tes-5" name="tes-5">
                </div>
            </div>