图片的自动切换

html如下：

 <div class="test">
        <ul>
            <li><img src="./images/f1.jpg" alt=""></li>
            <li><img src="./images/f2.jpg" alt=""></li>
            <li><img src="./images/f3.jpg" alt=""></li>
            <li><img src="./images/f4.jpg" alt=""></li>
            <li><img src="./images/f2.jpg" alt=""></li>
            <li><img src="./images/f1.jpg" alt=""></li>
        </ul>
    </div>
    <div class="test">
        <ul>
            <li><img src="./images/f1.jpg" alt=""></li>
            <li><img src="./images/f2.jpg" alt=""></li>
            <li><img src="./images/f3.jpg" alt=""></li>
            <li><img src="./images/f4.jpg" alt=""></li>
            <li><img src="./images/f2.jpg" alt=""></li>
            <li><img src="./images/f1.jpg" alt=""></li>
        </ul>
    </div>

jq如下：

        $.fn.imgList = function (time) {
            var $this = $(this)
            var controls = $this.map(function (i, o) {
                var $o = $(o)
                var $imgs = $o.find('img')
                var runId = 0
                var runTime = (time && time * 1000) || 1000
                var current = 0
                var max = $imgs.length

                // var runTime
                // if (time != undefined) {
                //     runTime = time * 100
                // }
                // else {
                //     runTime = 1000
                // }
                if ($imgs.length == 0) {
                    throw "do not have inages"
                }
                $o.addClass("imgList")
                $imgs.hide().eq(0).show()

                var showImg = function (index) {
                    $imgs.fadeOut().eq(index).fadeIn()
                }
                var start = function () {
                    if (runId == 0) {
                        runId = setInterval(function () {
                            if (current >= max - 1) current = -1
                            showImg(++current)
                        }, runTime)
                    }
                }
                var stop = function () {
                    clearInterval(runId)
                    runId = 0
                }
                start()

                return {
                    start: start,
                    stop: stop
                }
            })
            return {
                start: function (index) {
                    if (index == undefined) {
                        for (var i = 0; i < controls.length; i++) {
                            controls[i].start()
                        }
                    }
                    else {
                        controls[index].start()
                    }

                },
                stop: function (index) {
                    if (index == undefined) {
                        for (var i = 0; i < controls.length; i++) {
                            controls[index].stop()
                        }
                    }
                    else {
                        controls[index].stop()
                    }

                }
            }
        }

function globle_function(){
    console.log("globlr",this);
}
globle_function()

$.jQuery_globle_function = function(){
    console.log("jQuery",this);
}
$.jQuery_globle_function()

$.fn.setRedBackground = function(){
    console.log("jQuery.fn",this);
    $(this).css("background","red")
}

var controls = $(".test").imgList(1)