I have a banner that fades in and out different divs on a timer. I want to add arrows so you can click through them if you'd like. I can call the proper part to fade in the next div, but the problem is, my time is still running so it still fades in a div at a given time. How would I go about just stopping or resetting the timer to the proper one, on one of the arrow clicks? Here is my function
(function ($) {
$.fn.extend({
//plugin name - rotaterator
rotaterator: function (options) {
var defaults = {
fadeSpeed: 4000,
pauseSpeed: 100,
child: null
};
var options = $.extend(defaults, options);
return this.each(function () {
var o = options;
var obj = $(this);
var items = $(obj.children(), obj);
items.each(function () { $(this).hide(); })
if (!o.child) {
var next = $(obj).children(':first');
} else {
var next = o.child;
}
$(next).fadeIn(o.fadeSpeed, function () {
$(next).delay(o.pauseSpeed).fadeOut(o.fadeSpeed, function () {
var next = $(this).next();
if (next.length == 0) {
next = $(obj).children(':first');
}
$(obj).rotaterator({ child: next, fadeSpeed: o.fadeSpeed, pauseSpeed: o.pauseSpeed });
})
});
});
}
});
})(jQuery);
And then I start it like so
$(document).ready(function () {
$('#rotate').rotaterator({ fadeSpeed: 1200, pauseSpeed: 4000 });
});
Now, I can make it rotate by calling this line onclick
$(obj).rotaterator({ child: next, fadeSpeed: o.fadeSpeed, pauseSpeed: o.pauseSpeed });
And as long as I define what the obj is and what I want the child to be, it will go to the proper div. The problem is, like I said, the timer is still set. And so then it will fade to a different div at it's alotted time. How would I stop that? I've seen where I can use clearTimeout(instance) but I don't know how I would store that instance so it's global. Can I just define a variable outside of my document.ready function and set it equal to the rotate line? I'm not very clear on how variables and scope work in JS
