Javascript 触发器在Jquery幻灯片中工作不正常

我在jquery中做了一个幻灯片演示，但是我很难为触发器的功能化制定一个合适的算法。 我们将非常感谢在这方面提供的任何帮助

HTML

提前感谢。

演示：

这里有一个更好的函数：）

---

希望我能帮忙

非常感谢您的回复。如果只是关于使用箭头触发器，我更愿意使用您的功能，但我希望光盘触发器也能工作。哦！这是我所做的实现的完整演示，我认为它更清晰，如果您有任何问题，askI将非常感谢您帮助实现光盘触发器的算法。当然！我忘了：）我刚刚更新了答案：）

<div class=slide-show>
    <div id=slide1><h1>1</h1></div>
    <div id=slide2><h1>2</h1></div>
    <div id=slide3><h1>3</h1></div>
    <div id=slide4><h1>4</h1></div>
</div>
<div class=slide-controls>
    <div class=slide-controls-wrap>
        <ul style="float:left;">
            <li class=slide-cont id=1></li>
            <li class=slide-cont id=2></li>
            <li class=slide-cont id=3></li>
            <li class=slide-cont id=4></li>
        </ul>
        <ul style="float:right;margin-right:50px;margin-top:2px;">
            <li class=left-arrow></li>
            <li class=right-arrow></li>
        </ul>
    </div>
</div>

$(document).ready(function () {
    var delayInterval = 5000;
    var delay = setTimeout;
    function slide_show(cont) {
        if (cont > 4) cont = 1;
        $("#slide" + cont).fadeIn(1500);
        $("#" + cont).css("background-position", '-69px -94px');
        delay(function () {
            $("#slide" + cont).fadeOut(1500);
            $("#" + cont).css("background-position", '-19px -94px');
            $('#1').click(function () {
                slide_show(1);
            });
            $('#2').click(function () {
                slide_show(2);
            });
            $('#3').click(function () {
                slide_show(3);
            });
            $('#4').click(function () {
                slide_show(4);
            });
            slide_show(cont + 1);    
            //$("#5").css("background-position",'-69px -94px');
        }, delayInterval);
    }
    slide_show(1);    
});

$(document).ready(function(){
  $('.slide-cont').click(function(){
    var slideId = $(this).attr('id');
    currentSlide = slideId - 1;
    $(slides).hide();
    $('#slide' + slideId).fadeIn(1500);
  })
})
var slides = $('.slide-show div');
currentSlide = 0;

function changeSlide(n) {
    currentSlide += n;
    if (currentSlide > slides.length - 1)
        currentSlide = 0;
    else if(currentSlide < 0)
        currentSlide = slides.length -1;

   $(slides).hide();
    $(slides[currentSlide]).fadeIn(1500);
}

//Go one slide to the right every 2 seconds
setInterval(function(){changeSlide(1)}, 2000);