更改JS函数对象

Question

于是我就问一个问题，前一段时间在这里>Cons of MouseOver for webpages跑进与启用/禁用事件的一些问题。根据帖子的回答，我应该更新我的功能作为一个对象轻松地发出。试错的几个小时以及网上调研后不过，我还是不明白，对象是如何工作的

所以这就是我要投入到一个对象的功能，

$(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); 
    }; 
})(); 

那么究竟应该如何实现我的功能到对象，以便它的工作？

Answer 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(); 
}); 

DEMO：http://jsfiddle.net/STcvq/5/

@Bergi的

最新版本礼貌

Answer 2

你应该做的目的，望着建议代码，是将你的setInterval的Slideshow.next（）函数中的逻辑。这基本上涵盖了你的淡出，淡入淡出的逻辑。

所以你的函数看起来是这样的：在世界上最简单的

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

。

理想情况下，你会想要告诉它实例化幻灯片它应该使用的ID，通过传递在构造函数中。也就是说，你应该能够调用

新的幻灯片（“＃01”），以及新的幻灯片（“＃02”），这样就可以真正重用。

然后，你的下一个功能将变为看起来像（假设ID存储在this.elementId）：

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

希望这有助于

Answer 3

改变语法：

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/