基于JQ的自动、点击轮播

帮写的一个简单的轮播图……
此处请自行引入jquery。上代码！！！

<style>
        body{
            padding: 0;
            margin: 0;
            overflow: hidden;
        }
        .array {
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        .array > div {
            width: 10%;
            height: 100%;
            display: inline-block;
            position: absolute;
            top: 0;
        }

        .leftArr {
            left: 0;
            background: -webkit-linear-gradient(left, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0));
            background: -o-linear-gradient(right, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0));
            background: -moz-linear-gradient(right, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0));
            background: linear-gradient(to right, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0));
        }

        .rightArr {
            right: 0;
            background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
            background: -o-linear-gradient(right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
            background: -moz-linear-gradient(right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
            background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
        }
        .imageBox{
            width: 100%;
            height: 100%;
            position: relative;
        }
        .array > div img {
            width: 60px;
            height: 60px;
            cursor: pointer;
        }
        .vaCenter {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
        .pointList {
            position: absolute;
            top: auto;
            left: 0;
            right: 0;
            margin: auto;
            height: 21px;
            bottom: 24px;
            text-align: center;
        }
        .pointList>div {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 8px;
            background: #3d786c;
            margin-right: 6px;
        }
        .focusActive {
            background: #79bbae !important;
        }

<div class="imageBox">
    <img src="img/img1.jpg" id="images" index="0" alt=""/>
    <div class="array">
        <div class="leftArr">
            <img onclick="next(this)" data="left" class="vaCenter" src="img/leftArr.png" alt="">
        </div>
        <div class="rightArr">
            <img onclick="next(this)" data="right" class="vaCenter" src="img/rightArr.png" alt="">
        </div>
    </div>
    <div class="pointList"></div>
</div>

//urlList 数组 将所有图片的路径写入
    //list 字符串 第一个圆点添加focus的样式
    var urlList=['img/img1.jpg','img/img2.jpg','img/img3.jpg','img/img4.jpg','img/img5.jpg','img/img6.jpg','img/img7.jpg'],list='<div class="focusActive"></div>';
    for (var i = 0; i < urlList.length - 1; i++) {
        list += '<div></div>';
    }
    $('.pointList').html(list);//将所有的圆点都添加到容器里面
        function next(e) {//点击上/下一张
            window.clearInterval(set);//点击滚动轮播时清除计时器
            var _ths = $(e),
                    data = _ths.attr('data'),//查看此事件发生在左点击还是右点击
                    _index = $('.imageBox #images').attr('index'),//当前显示的图片是在数组中的第几张
                    len = urlList.length,//轮播图片的总量
                    _idx = 0;
            if (data == 'left') {
                var ix = 0;
                if (_index != 0) {
                    ix = parseInt(_index) - 1;
                    _idx = ix + 1;
                } else {
                    ix = len - 1;
                    _idx = len;
                }
                $('.imageBox #images').attr('src', urlList[ix]).attr('index', ix);
                $('.pointList>div').removeClass('focusActive');
                $('.pointList>div:nth-child(' + _idx + ')').addClass('focusActive');
            } else {
                var ix = 0;
                if (parseInt(_index) + 1 != len) {
                    ix = parseInt(_index) + 1;
                    _idx = ix + 1;
                } else {
                    ix = 0;
                    _idx = 1;
                }
                $('.imageBox #images').attr('src', urlList[ix]).attr('index', ix);
                $('.pointList>div').removeClass('focusActive');
                $('.pointList>div:nth-child(' + _idx + ')').addClass('focusActive');
            }
            set=window.setInterval(function(){//点击轮播结束，启动计时器
                autoScroll()
            },4000);
        }
    $(".imageBox>div").on({
        mouseover : function(){
            clearInterval(set);//鼠标移到图片上关闭自动轮播
        } ,
        mouseout : function(){
            set=window.setInterval(function(){
                autoScroll()
            },4000);//鼠标移出图片区域重新启动自动轮播
        }
    }) ;

    function autoScroll(){//自动轮播
        //_index：每张图片链接在
        var _index = $('.imageBox #images').attr('index'),
                len = urlList.length,
                _idx = 0;
        var ix = 0;
        if (parseInt(_index) + 1 != len) {
            ix = parseInt(_index) + 1;
            _idx = ix + 1;
        } else {
            ix = 0;
            _idx = 1;
        }
        $('.imageBox #images').attr('src', urlList[ix]).attr('index', ix);
        $('.pointList>div').removeClass('focusActive');
        $('.pointList>div:nth-child(' + _idx + ')').addClass('focusActive');
    }
    var set=window.setInterval(function(){//自动执行计时器
        autoScroll()
    },4000);

完了……没了……