原理：

样式

<style>
    * {
        padding: 0;
        margin: 0;
    }

    ul li {
        list-style: none;
    }

    .carousel {
        position: absolute;
        left: 50%;
        top: 50%;
        overflow: hidden;
    }

    .imgbox {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }

    .boxRight {
        left: 100%;
    }

    .boxLeft {
        left: -100%;
    }

    .imgbox img {
        width: 100%;
    }

    .leftBotton {
        position: absolute;
        left: 2%;
        top: 50%;
        z-index: 9999;
        cursor: pointer;
    }

    .rightBotton {
        position: absolute;
        right: 2%;
        top: 50%;
        z-index: 9999;
        cursor: pointer;
    }

    .indications {
        position: absolute;
        left: 50%;
        bottom: 1%;
        z-index: 9999;
    }

    .indications ul li {
        float: left;
        border-radius: 100%;
        cursor: pointer;
    }

    .indications ul li:last-child {
        margin-right: none;
    }
</style>

容器carousel ：

<div class='carousel'>
        <div class='imgbox boxCenter'>
            <img src="images/0.jpg" alt="">
        </div>
        <button class='leftBotton'><</button>
        <button class='rightBotton'>></button>
        <div class='indications'>
            <ul>

            </ul>
        </div>
    </div>

我们不能滥用全局变量，所以好的方法是把变量放在对象里面，当需要时再调用。

这个是在写js之前设置的变量。

   var obj = {
        'imgArr': ['0.jpg', '1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg',
            '10.jpg'
        ],
        'boxwidth': 800,     //轮播容器的宽度
        'boxheight': 400,      //轮播容器的高度
        'liwidth': 25,          //小圆点的宽度
        'liheight': 25,         //小圆点的高度
        'liMargin': 20,         //小圆点之间的距离
        'licolor': '#fff',      //小圆点默认的颜色
        'checkcolor': 'red',    //当前小圆点的颜色
        'current': 0,            //当前图片是第几张   
        'changetime': 500,      //两张图片的过渡时间
        'autoChangeTime': 2000   //自动轮播的间隔
    }

首先我们需要初始化图片容器的样式

 //  初始化轮播容器的样式
    $('.carousel').css({
        'width': obj.boxwidth + 'px',
        'height': obj.boxheight + 'px',
        'marginLeft': -obj.boxwidth / 2 + 'px',
        'marginTop': -obj.boxheight / 2 + 'px'
    })

根据图片的数量动态创建小圆点的个数

 //创建小圆点
    function createLi() {
        for (var i = 0; i < len; i++) {
            var myli = '<li></li>' //创建li
            $('.indications ul ').append(myli) //把li装到小圆点的容器里边
        }
        //初始化小圆点的样式
        $('.indications ul li').css({
            'width': obj.liwidth + 'px',  //小圆点的宽度
            'height': obj.liheight + 'px',  //小圆点的高度
            'background': obj.licolor,   //小圆点的背景色
            'margin-right': obj.liMargin + 'px'  //小圆点之间的距离
        })
        //默认第一个小圆点选中
        $('.indications ul li').eq(0).css({
            'background': obj.checkcolor
        })
        //小圆点的容器是定位的，因为需要居中，所以要设置marginleft为负的宽度的一半
        $('.indications').css({
            'marginLeft': -len * (obj.liwidth + obj.liMargin) / 2 + 'px'
        })
    }
    createLi();

当轮播容器向左移动时，即轮播下一张

//轮播下一张

    function next() {
      //如果当前图片的张数大于或者等于图片的总数量，则回到第一张。
        if (obj.current >= len) {
            obj.current = 0;
        }
 //动态创建class为boxright的div，放到轮播容器中
        var createDiv = '<div class="imgbox  boxRight"><img src="images/' + obj.imgArr[obj.current] + '"></div>'
        $('.carousel').append(createDiv);

      //改变boxcenter和boxright的left
        $('.boxCenter,.boxRight').animate({
            left: '-=100%'
        }, obj.changetime, function () {
       //改变boxright的class为boxcenter
            $('.boxRight').attr('class', 'imgbox boxCenter')
    //删除left值小于0的div，因为你不知道哪个div的left小于0 ，所以采用循环的方式。
            for (var i = 0; i < 2; i++) {
                var whichToRemove = parseInt($('.imgbox').eq(i).css('left'));
                if (whichToRemove < 0) {
                    $('.imgbox').eq(i).remove();
                }
            }

        })
        addstyle();   
    }

//轮播上一张

 //轮播上一张

    function prev() {

        if (obj.current < 0) {
            obj.current = len - 1;
        }

        var createDiv = '<div class="imgbox  boxLeft"><img src="images/' + obj.imgArr[obj.current] + '"></div>'
        $('.carousel').append(createDiv);

        $('.boxCenter,.boxLeft').animate({
            left: '+=100%'
        }, obj.changetime, function () {

            $('.boxLleft').attr('class', 'imgbox boxCenter')

            for (var i = 0; i < 2; i++) {
                var whichToRemove = parseInt($('.imgbox').eq(i).css('left'));
                if (whichToRemove > 0) {
                    $('.imgbox').eq(i).remove();
                }
            }

        })

        addstyle();
    }

    //给当前的li添加样式

    function addstyle() {

        $('.indications ul li').css({
            'backgroundColor': obj.licolor
        })
        $('.indications ul li').eq(obj.current).css({
            'backgroundColor': obj.checkcolor
        })

    }

 // 小圆点的点击事件
    $('.indications ul li').click(function () {
        obj.current = $(this).index();
        next();

    })

 //鼠标移上去停止自动轮播事件
    $('.carousel').hover(function () {
        clearInterval(autoPlay)
    }, function () {
        autoPlay = setInterval(function () {
            obj.current++;
            next()
        }, obj.autoChangeTime);
    })

  //左右两边按钮的点击事件
    $('.leftBotton').click(function () {

        obj.current = obj.current - 1;
        prev();
        addstyle();

    })

    $('.rightBotton').click(function () {
        obj.current = obj.current + 1;
        next();
        addstyle();
    })