我正在尝试创建一个幻灯片的图像。实际上，它更像是一个淡入淡出显示。
我可以解释整个事情，但我认为这是一个更清楚，如果我只是张贴我的代码。

var Images = ["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg"]
var ImageContainer = $("#Images");
var Image = $("<img />");
var Counter = 0;

var Animate = {
    Start: function() {
        var that = this;
        Image.attr("src", Images[Counter]);
        ImageContainer.append(Image.fadeIn(that.Middle()));
    },

    Middle: function() {
        var that = this;
        setTimeout(function() {
            that.End();
        }, 2000);
    },

    End: function() {
        var that = this;
        Image.fadeOut(function() {
            Counter = Counter + 1;
            that.Start();
        })
    }
}

Animate.Start();

$("#Button").click(function() {
    //Stop the animation; //Change counter value; //Start animation
});

所以我的主要问题是：我怎么做停止，改变和开始功能。我的第二个问题是：这是一个链接事件的好方法吗？我以前尝试过其他方法，但是它们很快就变得很难看。我也不是一个真正的JavaScriptMaven，所以也许我的例子中有一些非常奇怪的代码。像var that = this;这样的代码让我觉得我做错了。