jq轮播图封装function赋值为undefined

代码我在网上找的,比较乱,我就简化了下,出现了3个我问题

1、这块代码出现了索引不是0开始,导致我后面需添加i++或i--

                    $(opts.small_elem).find("ul li").each(function(index) {
                        if ($(this).hasClass(opts.state)) {
                            console.log(index);
							return index
                        }
                    });	

2、我封装了上述代码为function On(),但是负责给i,提示undefined

                function On() {
					
                    $(opts.small_elem).find("ul li").each(function(index) {
                        if ($(this).hasClass(opts.state)) {
                            console.log(index);
							return index
                        }
                    });					

                }

3、这代码还能优化,或者有什么bug吗

 

全部代码如下:

(function($) {
    var defaluts = {
        large_elem: ".large_elem",
        small_elem: ".small_elem",
        left_btn: ".left_btn",
        right_btn: ".right_btn",
        state: "on",
        speed: "normal",
        vis: 4
    };
    $.fn.extend({
        "thumbnailImg": function(options) {
            var opts = $.extend({}, defaluts, options);
            return this.each(function() {
                
                var t = 0;
				
                $(opts.large_elem).find("ul li").eq(0).show();
                $(opts.small_elem).find("ul li").eq(0).addClass(opts.state);
				
                var len = $(opts.small_elem).find("ul li").length;
                var out;      //在画面外的图片数量				
                var w = $(opts.small_elem).find("ul li").outerWidth(true);          //小图li的实际宽度=110+10=120     
			   
			   $(opts.small_elem).find("ul").css("width", len * w + "px");            //设置小图ul的宽度=120*6=720
			   
			   
			   if (len < opts.vis) {//如果合计小图数量小于一页小图数量
                    out = 0
                } else {
                    out = len - opts.vis
                }
			
				

                
				
                //点击小图li
				$(opts.small_elem).find("ul li").click(function() {

                    t = $(this).index();   //返回点击的li的索引位置
                    Img(t)                 //执行img函数
                });
				
				//点击左边按键
                $(opts.left_btn).click(function() {
                    var i;
				
                    $(opts.small_elem).find("ul li").each(function(index) {
                        
						if ($(this).hasClass(opts.state)) {
                            i = index;
                        }
                    });						
                    i--;
                    if (i < 0) {//当前图片索引<第一张图片索引,跳转到【最后一张】图片
                        i = len - 1
                    }

                    Img(i)
                });
				//点击右边按键
                $(opts.right_btn).click(function() {

					
					var i = On();
					console.log(i);
                    i++;
					//console.log(i);
                    if (i > len - 1) {//当前图片索引>最后一张图片索引,跳转到【第一张】图片
                        i = 0
                    }


                    Img(i)
                });
				
                function On() {
					
                    $(opts.small_elem).find("ul li").each(function(index) {
                        if ($(this).hasClass(opts.state)) {
                            console.log(index);
							return index
                        }
                    });					

                }

				
                function Img(i) {
                    $(opts.large_elem).find("ul li").eq(i).fadeIn().siblings().hide();
                    $(opts.small_elem).find("ul li").eq(i).addClass(opts.state).siblings().removeClass(opts.state);
					
                    var wi = w * i;      //每张图片距离原点的距离
					var wo = w * out;    //外面小图片距离原点的距离
					
                    if (wi <= wo) {
                        $(opts.small_elem).find("ul").stop().animate({
                            marginLeft: -wi + "px"
                        }, opts.speed)
                    } else {
                        $(opts.small_elem).find("ul").stop().animate({
                            marginLeft: -wo + "px"
                        }, opts.speed)
                    }
                }

            })
        }
    })
}
)(jQuery);