jquery实现图片轮播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="jquery-3.2.1.js"></script>
    <script type="text/javascript" src="Carousel.js"></script>
    <link rel="stylesheet" type="text/css" href="Carousel.css"/>
    <title>轮播</title>
</head>
<body>
    <div id="main">
            <img id="prev" src="icon/prev.png"/>
            <img id="next" src="icon/next.png"/>
            <ul class="pic">
                <li class="active"><img src="images/1.jpg" alt=""/></li>
                <li><img src="images/2.jpg" alt=""/></li>
                <li><img src="images/3.jpg" alt=""/></li>
                <li><img src="images/4.jpg" alt=""/></li>
            </ul>
            <ul class="num">
                <li class="visited">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
    </div>
</body>
</html>

$(function () {
    //点击上翻显示上一张图片
    $("#prev").click(function () {
        clearInterval(time);
        now=(now-1+4)%4;
        autoPlay();
        $(".pic li:eq("+now+")").addClass("active").siblings().removeClass();
        $(".num li:eq("+now+")").addClass("visited").siblings().removeClass();
    })
    //点击下翻显示下一张图片
    $("#next").click(function () {
        clearInterval(time);
        now=(now+1+4)%4;
        autoPlay();
        $(".pic li:eq("+now+")").addClass("active").siblings().removeClass();
        $(".num li:eq("+now+")").addClass("visited").siblings().removeClass();
    })
    //自动播放
    var time="";
    var now=0;
    function autoPlay(){
        time = setInterval(function(){
            if(now<3) {
                now++;
            }else{
                now=0;
            }
            $(".pic li:eq("+now+")").addClass("active").siblings().removeClass();
            $(".num li:eq("+now+")").addClass("visited").siblings().removeClass();
        },1500);
    }
    autoPlay();
    //点击数字显示对应图片
    $(".num li").click(function () {
        clearInterval(time);
        numIndex=$(this).index();
        now=numIndex;
        autoPlay();
        $(this).addClass("visited").siblings().removeClass();
        $(".pic li:eq("+numIndex+")").addClass("active").siblings().removeClass();
    })

　　//鼠标经过是停止轮播
　　$(".pic img").mouseover(function () {
    　　clearInterval(time);
　　})
　　//鼠标离开时继续轮播
　　$(".pic img").mouseout(function () {
    　　autoPlay();
　　})

})

*{
    margin:0;
    padding:0;
}
#main{
    width: 1200px;
    height: 300px;
    margin: 0 auto;
    position: relative;
}
ul{
    list-style: none;
}
.pic>li{
    width: 800px;
    height: 300px;
    position: absolute;
    top:0;
    left: 200px;
}
.pic li img{
    width: 800px;
    height: 300px;
    position: absolute;
    top:0;
    left: 0;
    z-index: 0;
    cursor: pointer;
}
.active{
    width: 800px;
    height: 300px;
    position: absolute;
    top:0;
    left: 0;
    z-index: 1;
}
.num{
    position:absolute;
    top: 250px;
    left: 850px;
    z-index: 999;
}
.num li{
    display: block;
    float: left;
    padding:0 10px;
    text-align: center;
    background-color: #ff6600;
    border-right: 1px solid white;
    color: white;
    cursor: pointer;
}
.num li:hover{
    background-color: white;
    color: #ff6600;
}
#prev{
    position: absolute;
    top: 100px;
    left: 90px;
    width: 100px;
    cursor: pointer;
}
#next{
    position: absolute;
    top: 100px;
    left: 1000px;
    width: 100px;
    cursor: pointer;
}
.num li.visited{
    background-color: white;
    color: #ff6600;
}

实现功能：

1、定时轮播

2、鼠标经过时图片停止轮播

3、上下翻页

4、点击对应显示第N张图片