Custom slideshow to pause on mouseover

Question

0.00/5 (No votes)

See more:

Hi everyone,

I have designed my own slideshow that cycles through 4 different functions in javascript. Each function hides and displays different elements within the container div. The functions are named:
initial_slide();
second_slide();
third_slide();
fourth_slide();
loop(); - This function allows the slideshow to continuously go through.

Here is my code:

JavaScript

function loop(){
    initial_slide();
    setTimeout(second_slide, 10000);
    setTimeout(third_slide, 20000);
    setTimeout(fourth_slide, 40000);
    setTimeout(loop, 50000);
};
  initial_slide();
  setTimeout(second_slide, 10000);
  setTimeout(third_slide, 20000);
  setTimeout(fourth_slide, 40000);
  setTimeout(loop, 50000);

My question is, how can I pause the timer when the mouse goes over the container div, so that the slideshow stays on the slide it currently shows? And is it possible to resume the timer once the mouseout function is performed?

Any help is much appreciated,
Thanks.

Posted 1-Nov-12 23:35pm

thomasriley

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

n.podbielski · Answer 1 · 2012-11-01T23:42:00

Solution 1

JavaScript

setTimeout(loop, 50000);

function returns an object in JS. There is clearTimeout function that take this object as parameter.
So on event handler mouseover:

JavaScript

var timeout = setTimeout(loop, 50000);
slideshow.onmouseover(function(){
clearTimeout(timeout);
});

And on mouse out:

JavaScript

slideshow.onmouseout(function(){
setTimeout(loop, 50000);
});

Posted 1-Nov-12 23:42pm

n.podbielski

Comments

thomasriley 2-Nov-12 6:03am

Hi, I have integrated that into my code and it does not pause the cycle.. Is there anything else that should be considered?

n.podbielski 2-Nov-12 6:14am

It's an example. I don't know name of html element with slides. So obviously you have to change variable 'slideshow'. It also suppose to be jQuery object since you added this tag to your Question. Maybe names of this 2 functions are wrong (onmouseover,onmouseout), I did not checked that. Search here: http://api.jquery.com/category/Events/

thomasriley 2-Nov-12 6:07am

I'm guessing that because there are multiple timers running at once, there needs to be some sort of external function that pauses ALL timers? I don't know whether its possible but it should be!

n.podbielski 2-Nov-12 6:17am

So you have a few slideshows on one page, and you want to pause all of them at once? You should have only one timeout for each slide show. If there is more it means that there is something wrong with your code.