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
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