jQuery实现轮播效果

今天是我第一天在CSDN上写东西，之前写网站一直用的都是轮播插件，没有自己写过，今天参考了一下网上的别人的思路，自己写了这个。写的不是很好，多多包涵，只是为了让自己能够有所进步。谢谢大家
HTML

<div class="banner">
    <ul class="bannerimg">
        <li><img src="banner1.jpg" alt=""></li>
        <li><img src="banner2.jpg" alt=""></li>
        <li><img src="banner3.jpg" alt=""></li>
        <li><img src="banner4.jpg" alt=""></li>
    </ul>
    <ul class="slide_point">
    </ul>
    <button class="left" href="javascript:void(0)"><<</button>
    <button class="right" href="javascript:void(0)">>></button>
</div>

CSS

* {
            margin: 0;
            padding: 0;
        }

        .banner {
            width: 100%;
            height: 250px;
            position: relative;
        }

        .banner ul:nth-child(1) {
            width: 200000px;
            position: relative;
            overflow: hidden;;
        }

        .banner ul:nth-child(1) li {
            width: 1920px;
            float: left;
            overflow: hidden;
        }

        .banner ul:nth-child(1) li img {
            width: 100%;
            height: 250px;
        }

        .slide_point {
            width: 200px;
            margin: 0 auto;
            overflow: hidden;;
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
        }

        .slide_point li {
            width: 10px;
            height: 10px;
            background: #888;
            opacity: .6;
            float: left;
            display: block;
            border-radius: 50%;
            margin-left: 5px;
        }

        li.active {
            background: white;
            opacity: 1;
        }

        .banner > button {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #666;
            color: white;
            text-decoration: none;
            line-height: 40px;
            text-align: center;
            border: none;
        }

        .banner > button:focus {
            outline: -webkit-focus-ring-color auto 0px;
        }

        .banner button.left {
            display: block;
            position: absolute;
            left: 10px;
            bottom: 50%;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
        }

        .banner button.right {
            display: block;
            position: absolute;
            right: 10px;
            bottom: 50%;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
        }
    </style>

JS

$(document).ready(function () {

        /*动态增加原点开始*/
        var img = $(".bannerimg li");//获取到轮播图的个数
        $.each(img, function () {
            $(".slide_point").append('<li></li>');//遍历轮播图的个数，动态增加轮播原点个数
        });
        $(".slide_point li").first().addClass("active");//给第一个增加选中样式类
        /*动态增加原点结束*/


        /*通过原点控制轮播开始*/
        $(".slide_point li").click(function () {
            $(".slide_point li").removeClass("active");//先把所有的原点选中样式清除
            var num = $(this).index();//获取点击的是哪个原点
            var movePx = num * -1920 + "px";//设置移动的宽度
            $(".banner ul.bannerimg").animate({"marginLeft": movePx}, 500);//通过animate设置marginleft；
            $(this).addClass("active");//给刚才点击的li原点增加选中样式类
        })
        /*通过原点控制轮播结束*/


        /* 点击切换开始*/
        $(".left").click(function () {
            $(".left").attr("disabled", true);//将按钮设置为不可用，避免点击过多形成动画迟缓。
            var num = $(".slide_point li.active").index();//获取到当前选中的是哪一个原点对应的图片
            if (num == 0) {
                num = $(".slide_point li").last().index();//如果是第一张图片还往左边走，num就是最后一个原点位置的索引值，去到最后一张
                var movePx = (num) * -1920 + "px";
                $(".banner ul.bannerimg").animate({"marginLeft": movePx}, 500);
                $(".slide_point li").removeClass("active");
                $(".slide_point li").eq(num).addClass("active");
                setTimeout("$('.left').attr('disabled', false);", 500);//动画结束后将按钮设置为可用
            } else {
                var movePx = (num - 1) * -1920 + "px";//往左滑动 所以num-1
                $(".banner ul.bannerimg").animate({"marginLeft": movePx}, 500);
                $(".slide_point li").removeClass("active");
                $(".slide_point li").eq(num - 1).addClass("active");
                setTimeout("$('.left').attr('disabled', false);", 500);
            }
        })
        /* 点击切换结束*/

        //切换右边与切换左边同理
        $(".right").click(function () {
            $(".right").attr("disabled", true);
            var num = $(".slide_point li.active").index();
            var length = $(".slide_point li").length;
            if (num == length - 1) {
                $(this).attr("disabled", true)
                num = 0;
                var movePx = (num) * -1920 + "px";
                $(".banner ul.bannerimg").animate({"marginLeft": movePx}, 500);
                $(".slide_point li").removeClass("active");
                $(".slide_point li").eq(num).addClass("active");
                setTimeout("$('.right').attr('disabled', false);", 500);
            } else {
                var movePx = (num + 1) * -1920 + "px";
                $(".banner ul.bannerimg").animate({"marginLeft": movePx}, 500);
                $(".slide_point li").removeClass("active");
                $(".slide_point li").eq(num + 1).addClass("active");
                setTimeout("$('.right').attr('disabled', false);", 500);
            }
        })

        function changeTab() {
            var length = $(".slide_point li").length;//获取原点元素的长度
            var num = $(".slide_point li.active").index();//获取当前选中的图片的索引值
            if (num < length-1) {
                num++;//如果还没有到最后一张，则切换到下一张
            } else {
                num = 0;//如果到了最后一张，则切换到第一张
            }
            var movePx = num * -1920 + "px";
            $(".banner ul.bannerimg").animate({"marginLeft": movePx}, 500);
            $("ul.slide_point li").eq(num).addClass("active").siblings().removeClass("active");
        }

        //轮播定时器,3秒执行一次
        var timer = setInterval(changeTab, 3000);
    })

jQ引用的是百度的，是

<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

图片就不放出来了，我网上随便找的图片测试的。