javascript - Change JS function to an object -
so asked question awhile ago here > cons of mouseover webpages , ran issues enabling/disabling events. according answer post, supposed update function object call out easily. after few hours of trial , error online research, still don't understand how object works
so function want put object,
$(function () { $('#01 img:gt(0)').hide(); setinterval(function () { $('#01 :first-child').fadeout(1500) .next('img').fadein(1500) .end().appendto('#01'); }, 3000); });
and code provided initialize object,
var slideshow = (function () { this.interval; this.start = function () { ... initialize ... // catch interval id can stop later on this.interval = window.setinterval(this.next, 3000); }; this.next = function () { /* * cannot refer keyword in function * since gets executed outside object's context. */ ... logic ... }; this.stop = function () { window.clearinterval(this.interval); }; })();
so how should implement function object works?
i structure this:
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/
latest version courtesy of @bergi
Comments
Post a Comment