制作一个jquery插件的实例？

Question

我一直试图获得一个简单的插件，我在调用时创建了多个实例。它只需要两个图像，将它们作为第二个图像的顶部之一，并使用计时器将它们淡入淡出。我已经阅读了几篇关于通过插件制作实例的帖子，但似乎没有任何工作。我猜这是我遗失的一些小事。现在，它创建了3个实例，顶部图像为所有3个淡出，但只有最后一个继续循环：

var _top;
var _bottom; 
var images;

;(function( $ ){
    $.fn.pictureFade = function( options ){

        return this.each(function(){

        var $this = $(this);

        //run some code here


        var settings = $.extend({},options);
        images = settings.images;
         topImage = options.top;
         botImage = options.bot;



        i = 0;
        _top = $(topImage+" img");
        _bottom = $(botImage+" img");

        //Set first images
        $(_top).attr("src", images[i]);
        $(_bottom).attr("src", images[i+1]);  


        toggleDiv("top");


        });

    };




})( jQuery );


function toggleDiv(pos){

            if(pos == "top"){

                _top.delay(2000).fadeToggle(4000, "linear", function(){

                    i++;
                    if(i == images.length-1)i = -1;
                    _top.attr("src", images[i+1]);
                    toggleDiv("bottom");    
                }
        );  
        }   

        if(pos == "bottom"){
                 $(_top).delay(2000).fadeToggle(4000, "linear", function(){
                    $(_bottom).attr("src", images[i+1]);  
                     toggleDiv("top");

                }
           );
        }   
}

这是运行它的脚本。注意fadeImage是topImage和botImage的包装：

    <script type="text/javascript">
     $( document ).ready(function() {


    $("#fadeImage").pictureFade({
        images: [
        "images/aztec5.jpg",
        "images/aztec3.jpg", 
        "images/aztec7.jpg",
        "images/aztecicon.jpg"],

        top: "#topImage",
        bot: "#botImage"
    });

    $("#fadeImage2").pictureFade({
        images: [
        "images/aztec7.jpg",
        "images/aztec6.jpg",
        "images/aztec3.jpg", 
        "images/aztecicon.jpg"],

        top: "#topImage2",
        bot: "#botImage2"
    });

    $("#fadeImage3").pictureFade({
        images: [
        "images/aztec3.jpg", 
        "images/aztec5.jpg",
        "images/aztec7.jpg",
        "images/aztecicon.jpg"],

        top: "#topImage3",
        bot: "#botImage3"
    });

    });


    </script>