原生js輪播圖

<div id="benner">
    <div class="img">
        <img src="http://www.jq22.com/img/cs/500x300-1.png" class="imga active">
        <img src="http://www.jq22.com/img/cs/500x300-2.png" class="imga">
        <img src="http://www.jq22.com/img/cs/500x300-3.png" class="imga">
        <img src="http://www.jq22.com/img/cs/500x300-4.png" class="imga">
        <img src="http://www.jq22.com/img/cs/500x300-5.png" class="imga">
        <img src="http://www.jq22.com/img/cs/500x300-6.png" class="imga">
        <img src="http://www.jq22.com/img/cs/500x300-7.png" class="imga">
    </div>
    <ul class="title">
        <li class="nr active"></li>
        <li class="nr"></li>
        <li class="nr"></li>
        <li class="nr"></li>
        <li class="nr"></li>
        <li class="nr"></li>
        <li class="nr"></li>
    </ul>
</div>

=============================CSS==================================

* {
	margin:0px;
	padding:0px;
}
#benner {
	width:790px;
	height:340px;
	margin-left:15%;
	margin-top:10px;
}
#benner .imga {
	display:none;
}
#benner .img .active {
	display:block;
}
#benner .title {
	width:;
	height:16px;
	background-color:rgba(226,226,226,0.6);
	border-radius:30px;
	margin-top:-35px;
	float:left;
	margin-left:40%;
	margin-right:40%;
	padding:6px 0px 0px 10px;
	position:relative;
}
#benner .title .nr {
	list-style:none;
	width:10px;
	height:10px;
	background:#fff;
	border-radius:10px;
	float:left;
	margin-right:10px;
	margin-bottom:0px;
}
#benner .title .active {
	background:#db192a;
}

===========================================JS========================================

window.onload = function() {
    benner('#benner', '.nr', '.imga')

    function benner(parent, controller, mod) {

        var num = 0;
        var controller = $(controller);
        var mod = $(mod);
        var benner = $(parent);
        var autoPlayTime = 1500;
        var imgNum = mod.length - 1;
        var auto;

        autoPlay();
        //根據傳進來的名字獲取這個名字所對應的對象
        function $(name) {
            if (name[0] == '#') {
                return document.getElementById(name.substr(1));
            } else if (name[0] == '.') {
                return document.getElementsByClassName(name.substr(1));
            } else {
                return document.getElementsByTagName(name);
            }
        }

        //實現鼠標劃過圓點,變化圖片的效果
        //function change(controller, mod){
        //遍歷控制器,綁定鼠標劃過事件
        for (var i = 0; i < controller.length; i++) {
            //給控制器加個索引,並把i值賦值給索引
            controller[i].index = i;
            //給所有的控制器都加劃過事件
            controller[i].onmouseover = function() {
                for (var j = 0; j < controller.length; j++) {
                    //將所有控制器改爲默認樣式
                    controller[j].className = 'nr';
                }
                //改變所選的控制器樣式
                this.className = 'nr active';
                //將模型改爲默認樣式
                for (var x = 0; x < mod.length; x++) {
                    mod[x].className = 'imga';
                }
                //改變所選控制器對應的模型的樣式
                mod[this.index].className = 'imga active';
            }
        }
        //}
        //綁定鼠標移入,暫停播放圖片
        benner.onmouseover = function() {
            clearInterval(auto);
        }
        //綁定鼠標離開,繼續播放
        benner.onmouseleave = function() {
            autoPlay();
        }
        //指定播放那個圖片
        function play(num) {
            for (var j = 0; j < controller.length; j++) {
                controller[j].className = 'nr';
            }
            controller[num].className = 'nr active';
            for (var x = 0; x < mod.length; x++) {
                mod[x].className = 'imga';
            }
            mod[num].className = 'imga active';
        }
        //自動播放
        function autoPlay() {
            auto = setInterval(function() {
                if (num > imgNum) {
                    num = 0;
                }
                play(num);
                num++;
            }, autoPlayTime)
        }
    }

}