Javascript Noob: How to emulate slideshow on front page by automatically cycling through existing ho

Posted by Zildjoms on Stack Overflow See other posts from Stack Overflow or by Zildjoms
Published on 2010-03-25T17:44:31Z Indexed on 2010/03/25 23:13 UTC
Read the original article Hit count: 657

Filed under:
|
|
|
|

hey everyone. hope you could help me out

am working on this website and i've finished all the hover effects i like - they're exactly how i want them to be: http://s5ent.brinkster.net/beta3.asp - try hovering over the four links and you'll see a very simple fade effect at work, which degrades into a regular css hover without javascript.

what i plan to do is to make the page look like it had a fancy slideshow going on upon loading and while idle, and i wanted to achieve that by capitalizing on the existing hover styling/behavior of the main page links instead of using another script to create the effect from scratch.

to do this i imagined i'll need a script that emulates a hover action on each link at regular time intervals once the page has loaded, starting from left to right (footcare, lawn & equipment, about us, contact us), looping through all 4 links indefinitely (footcare, lawn & equipment, about us, contact us, footcare, lawn& equipment, etc.) but pauses when any of them have been actually hovered over by a viewer and resumes from wherever the user left off upon mouseout. hope you get my drift...

i also want to achieve this without unnecessarily disrupting the current html. so i guess everything will have to be done by scripting as much as possible..

i'm very new to javascript and jquery. as you can see at s5ent.brinkster.net/beta3.1-autohover.asp, the following script i made works wrong: it hovers-on all of them at the same time and doesn't hover-out anymore. when you try to actually hover into and out of each link the link just comes back on:

<script type="text/javascript">
$(document).ready(function () {
    var speed = 5000;
    var run = setInterval('rotate()', speed);
});
function rotate() {
    $('.lilevel1 a').each(function(i) {
        $(this).mouseover();
    });
}
</script>

it's just gross. aside from the fact that this last bit of script isn't even working in ie.

could you please help me make this thing happen? that'd be really sweet, guys. i know there are tonsa geniuses out there who could whip this up in no time. or if you have a better way to go about it by all means kindly lemme know.

thanks guys, hope you're all havin a blast.

© Stack Overflow or respective owner

Related posts about cycle

Related posts about automatic