更改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/