Javascript 如何在加载开始和悬停停止时制作幻灯片

我刚刚为我的幻灯片创建了一个div。下面我有一个脚本，可以使用下一个箭头和上一个箭头来制作这张幻灯片。我想让同一张幻灯片自动播放幻灯片，并将其悬停停止。
有人能帮我吗？我该怎么办？因为我是这方面的新手

<div id="slideshow">
               <a href="#" class="slideshow-prev">&laquo;</a> 
               <ul>
                    <li><img src="images/1.jpg" alt="photo1" /></li>
                    <li><img src="images/2.jpg" alt="photo2" /></li>
                    <li><img src="images/3.jpg" alt="photo3" /></li>
                    <li><img src="images/4.jpg" alt="photo4" /></li>
                    <li><img src="images/5.jpg" alt="photo5" /></li>
               </ul>
                <a href="#" class="slideshow-next">&raquo;</a> 
            </div>
               <script>

                //an image width in pixels 
                var imageWidth = $('#slideshow ul li').width();


                //DOM and all content is loaded 
                $(window).ready(function() {

                    var currentImage = 0;

                    //set image count 
                    var allImages = $('#slideshow li img').length;

                    //setup slideshow frame width
                    $('#slideshow ul').width(allImages*imageWidth);

                    //attach click event to slideshow buttons
                    $('.slideshow-next').click(function(){

                        //increase image counter
                        currentImage++;
                        //if we are at the end let set it to 0
                        if(currentImage>=allImages) currentImage = 0;
                        //calcualte and set position
                        setFramePosition(currentImage);

                    });

                    $('.slideshow-prev').click(function(){

                        //decrease image counter
                        currentImage--;
                        //if we are at the end let set it to 0
                        if(currentImage<0) currentImage = allImages-1;
                        //calcualte and set position
                        setFramePosition(currentImage);

                    });

                });

                //calculate the slideshow frame position and animate it to the new position
                function setFramePosition(pos){

                    //calculate position
                    var px = imageWidth*pos*-1;
                    //set ul left position
                    $('#slideshow ul').animate({
                        left: px
                    }, 300);
                }
            </script>

//以像素为单位的图像宽度
var imageWidth=$（“#幻灯片放映ul li”）.width（）；
//DOM并加载所有内容
$（窗口）.ready（函数（）{
var currentImage=0；
//设置图像计数
var allImages=$（'#幻灯片放映li img'）。长度；
//设置幻灯片放映帧宽度
$（'#幻灯片放映ul'）.width（allImages*imageWidth）；
//将单击事件附加到幻灯片放映按钮
$（'.slideshow next'）。单击（函数（）{
//增加图像计数器
currentImage++；
//如果我们在最后，让它设置为0
如果（currentImage>=allImages）currentImage=0；
//计算和设置位置
设置帧位置（当前图像）；
});
$（'.slideshow prev'）。单击（函数（）{
//减少图像计数器
当前图像--；
//如果我们在最后，让它设置为0
如果（currentImage在脚本标记内使用以下代码：

var time;
$(window).load(function(){
time = setInterval(function(){
    $('.slideshow-next').trigger('click');
    },5000);

$('#slideshow').hover(function(){
    clearInterval(time);
},function(){
    time = setInterval(function(){
        $('.slideshow-next').trigger('click');
        },5000);
    });
});

查看此示例了解如何暂停悬停：