1

所以我刚才在这里问了一个问题 >网页鼠标悬停的缺点， 并遇到了启用/禁用事件的一些问题。根据帖子的答案，我应该将我的函数更新为一个对象以轻松调用它。但是经过几个小时的反复试验以及在线研究，我仍然不明白该对象是如何工作的

所以这是我想放入一个对象的函数，

$(function () {
    $('#01 img:gt(0)').hide();
    setInterval(function () {
        $('#01 :first-child').fadeOut(1500)
           .next('img').fadeIn(1500)
           .end().appendTo('#01');
    }, 3000);
});

这是为初始化我的对象而提供的代码，

var Slideshow = (function () {
    this.interval;

    this.start = function () {
        ...
        initialize
        ...
        // catch the interval ID so you can stop it later on
        this.interval = window.setInterval(this.next, 3000);
    };

    this.next = function () {
        /*
         * You cannot refer to the keyword this in this function
         * since it gets executed outside the object's context.
         */
        ...
        your logic
        ...
    };

    this.stop = function () {
        window.clearInterval(this.interval);
    };
})();

那么我应该如何将我的函数实现到对象中以便它工作呢？

4

3 回答 3

1

我会这样构造它：

function Slideshow(container) {
    this.interval = undefined;

    this.start = function () {
        container.find("img").first().show();
        container.find("img:gt(0)").hide();
        this.interval = window.setInterval(this.next, 3000);
    };

    this.next = function () {
        var first = container.find(":first-child");
        first.fadeOut(1500, function () {
            first.next("img").fadeIn(1500);
            first.appendTo(container);
        });
    };

    this.stop = function () {
        window.clearInterval(this.interval);
    };
}

$(function () {
    var div = $("#div01");
    var slides = new Slideshow(div);

    div.hover(function() {
        slides.stop();
    }, function() {
        slides.start();
    });
    slides.start();
});

演示：http: //jsfiddle.net/STcvq/5/

最新版本由@Bergi 提供

于 2013-05-15T02:40:52.027 回答
0

查看推荐的代码，您应该打算将 setInterval 的逻辑移动到 Slideshow.next() 函数中。这基本上涵盖了你的淡出，淡入逻辑。

所以你的函数看起来像：

this.next = function() {
  $('#01 :first-child').fadeOut(1500)
       .next('img').fadeIn(1500)
       .end().appendTo('#01');
};

在最简单的世界里。

理想情况下，您希望通过在构造函数中传递它来告诉它应该使用哪个 id 来实例化您的幻灯片。也就是说，你应该能够调用

new Slideshow('#01') 和 new Slideshow('#02') 这样您就可以真正重复使用它。

然后，您的下一个函数将变为如下所示（假设 id 存储在 this.elementId 中）：

this.next = function() {
  $(this.elementId + ':first-child').fadeOut(1500)
       .next('img').fadeIn(1500)
       .end().appendTo('#01');
};

希望这可以帮助

于 2013-05-15T02:31:15.433 回答
0

将语法更改为：

var Slideshow = (function () {
return {
    interval:null,
    start : function () {
        // catch the interval ID so you can stop it later on
        this.interval = window.setInterval(this.next, 3000);
    },

    next: function () {

    },

    stop : function () {
        window.clearInterval(this.interval);
    }
};
})();

当您使用 jquery 时，更好的答案是创建一个小插件： http ://learn.jquery.com/plugins/basic-plugin-creation/

于 2013-05-15T02:48:36.633 回答