自己（小白）写的一个JQ轮播，朋友们能帮我优化一下吗

[待解决问题]
以下是可以实现的代码（暂时没发现什么BUG），我想优化的是leftMovement()跟rightMovement()这两个函数，因为里面内容基本一样，但是我试了1.2个方法都出现不一样的BUG... 救助一下...
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        img { 
            border: none; 
        }
        #box{
            width: 470px;
            height: 150px;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }
        .ad{
            position: absolute;
            top: 0px;
            left: 0px;
        }
            .ad li{
                width: 470px;
                height: 150px;
            }
        .num{
            position: absolute;
            right: 10px;
            bottom: 10px;
            z-index: 999;
        }
            .num li{
                float: left;
                width: 20px;
                height: 20px;
                text-align: center;
                line-height: 20px;
                margin-left: 2px; 
                border: 1px solid #999;
                background-color: lightgreen;
                color: red;
                cursor: pointer;
            }
            .num .active{
                background-color: yellow;
            }
        .left{
            position: absolute;
            width: 20px;
            height: 50px;
            background-color: rgba(0,0,0,.3);
            top: 50%;
            left: 0;
            margin-top: -25px;
            line-height: 50px;
            text-align: center;
            color: #fff;
            font-size: 20px;
            cursor: pointer;
        }
        .right{
            position: absolute;
            width: 20px;
            height: 50px;
            background-color: rgba(0,0,0,.3);
            top: 50%;
            right: 0;
            margin-top: -25px;
            line-height: 50px;
            text-align: center;
            color: #fff;
            font-size: 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>

<div id="box">
    <ul class="ad">
        <li><a href="#"><img src="1.jpg" alt="图片"></a></li>
        <li><a href="#"><img src="2.jpg" alt="图片"></a></li>
        <li><a href="#"><img src="3.jpg" alt="图片"></a></li>
        <li><a href="#"><img src="4.jpg" alt="图片"></a></li>
        <li><a href="#"><img src="5.jpg" alt="图片"></a></li>
    </ul>
    <ul class="num">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <div class="left"><</div>
    <div class="right">></div>
</div>
<script src="jquery-3.1.0.min.js"></script>
<script type="text/javascript">
    $(function(){
        var $ad = $('.ad');
        var $num = $('.num li');
        var $left = $('.left');
        var $right = $('.right');
        var adLiHeight = $ad.children().height();
        var count = 0;
        var timer = null;

        $left.on('click',leftMovement);
        function leftMovement(){
            clearInterval(timer);
            /*为了在快速点击的时候不出现BUG*/
            $(this).off('click');    
            if(count == 0){
                count = 5;
            }
                count--;    
            $num.eq(count).addClass('active').siblings().removeClass('active');
            $ad.animate({
                top : -adLiHeight * count + 'px'
            },function(){
                /*动画执行完毕后恢复按钮点击事件*/
                $left.on('click',leftMovement);
            })
            timer = setInterval(move,2000);
        }

        $right.on('click',rightMovement);
        function rightMovement(){
            clearInterval(timer);

            /*为了在快速点击的时候不出现BUG*/
            $(this).off('click');
            if(count == 4){
                count = -1;
            }
                count++;    
            $num.eq(count).addClass('active').siblings().removeClass('active');
            $ad.animate({
                top : -adLiHeight * count + 'px'
            },function(){
                /*动画执行完毕后恢复按钮点击事件*/
                $right.on('click',rightMovement);
            })
            timer = setInterval(move,2000);
        }
        
        $num.on('click',function(){
            var numLiIndex = $(this).index();
            count = numLiIndex;
            $(this).addClass('active').siblings().removeClass('active');
            $ad.animate({
                top : -adLiHeight * numLiIndex + 'px'
            })

        })
        


        $ad.hover(function(){
            clearInterval(timer);
        },function(){
            timer = setInterval(move,2000);
        })

        timer = setInterval(move,2000);

        function move(){
            if(count >= 4){
                count = 0;
            }else{
                count++;
            }
            
            $num.eq(count).addClass('active').siblings().removeClass('active');
            $ad.animate({
                top : -adLiHeight * count + 'px'
            })
        }
    })
</script>
</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        img { 
            border: none; 
        }
        #box{
            width: 470px;
            height: 150px;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }
        .ad{
            position: absolute;
            top: 0px;
            left: 0px;
        }
            .ad li{
                width: 470px;
                height: 150px;
            }
        .num{
            position: absolute;
            right: 10px;
            bottom: 10px;
            z-index: 999;
        }
            .num li{
                float: left;
                width: 20px;
                height: 20px;
                text-align: center;
                line-height: 20px;
                margin-left: 2px; 
                border: 1px solid #999;
                background-color: lightgreen;
                color: red;
                cursor: pointer;
            }
            .num .active{
                background-color: yellow;
            }
        .left{
            position: absolute;
            width: 20px;
            height: 50px;
            background-color: rgba(0,0,0,.3);
            top: 50%;
            left: 0;
            margin-top: -25px;
            line-height: 50px;
            text-align: center;
            color: #fff;
            font-size: 20px;
            cursor: pointer;
        }
        .right{
            position: absolute;
            width: 20px;
            height: 50px;
            background-color: rgba(0,0,0,.3);
            top: 50%;
            right: 0;
            margin-top: -25px;
            line-height: 50px;
            text-align: center;
            color: #fff;
            font-size: 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>

<div id="box">
    <ul class="ad">
        <li><a href="#"><img src="1.jpg" alt="图片"></a></li>
        <li><a href="#"><img src="2.jpg" alt="图片"></a></li>
        <li><a href="#"><img src="3.jpg" alt="图片"></a></li>
        <li><a href="#"><img src="4.jpg" alt="图片"></a></li>
        <li><a href="#"><img src="5.jpg" alt="图片"></a></li>
    </ul>
    <ul class="num">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <div class="left"><</div>
    <div class="right">></div>
</div>
<script src="jquery-3.1.0.min.js"></script>
<script type="text/javascript">
    $(function(){
        var $ad = $('.ad');
        var $num = $('.num li');
        var $left = $('.left');
        var $right = $('.right');
        var adLiHeight = $ad.children().height();
        var count = 0;
        var timer = null;

        $left.on('click',function(){
            clearInterval(timer);    
            if(count == 0){
                count = 5;
            }
                count--;    
            $num.eq(count).addClass('active').siblings().removeClass('active');
            $ad.animate({
                top : -adLiHeight * count + 'px'
            })
            timer = setInterval(move,2000);

        })
        $right.on('click',movement);
        function movement(){
            clearInterval(timer);

            /*为了在快速点击的时候不出现BUG*/
            $(this).off('click');
            if(count == 4){
                count = -1;
            }
                count++;    
            $num.eq(count).addClass('active').siblings().removeClass('active');
            $ad.animate({
                top : -adLiHeight * count + 'px'
            },function(){
                /*动画执行完毕后恢复按钮点击事件*/
                $right.on('click',movement);
            })
            timer = setInterval(move,2000);
        }
        
        $num.on('click',function(){
            var numLiIndex = $(this).index();
            count = numLiIndex;
            $(this).addClass('active').siblings().removeClass('active');
            $ad.animate({
                top : -adLiHeight * numLiIndex + 'px'
            })

        })
        


        $ad.hover(function(){
            clearInterval(timer);
        },function(){
            timer = setInterval(move,2000);
        })

        timer = setInterval(move,2000);

        function move(){
            if(count >= 4){
                count = 0;
            }else{
                count++;
            }
            
            $num.eq(count).addClass('active').siblings().removeClass('active');
            $ad.animate({
                top : -adLiHeight * count + 'px'
            })
        }
    })
</script>
</body>
</html>
围观的小白 | 菜鸟二级 | 园豆：208
提问于：2017-02-16 16:41
< >
所有回答(1)
哪用这么麻烦自己写轮播,网上都是代码,拿过来就能用
大黄人 | 园豆：641 (小虾三级) | 2017-02-21 11:25
清除回答草稿
您需要登录以后才能回答，未注册用户请先注册。
欢迎，请先 登录 或者 注册 。

自己（小白）写的一个JQ轮播，朋友们能帮我优化一下吗

欢迎，请先登录或者注册。
