Pause "rotating" images on mouse over
Hi,
I currently have a loop of images showing up on the bottom of the screen after various intervals, and the only thing left i need to do is to pause this temporarily whilst the mouse is hovering over the current image.
Heres the code so far;
- var InfiniteRotator =
- {
- init: function()
- {
- // initial fade-in time
- var initialSlideIn = 1000;
- // interval between items
- var itemInterval = 12000;
- // cross-fade time
- var slideTime = 800;
- // create image variable
- var img = $('#HIBanners img');
- // count number of items
- var numberOfItems = img.length;
- // set current item
- var currentItem = 0;
- // show first item
- img.eq(currentItem).animate({ bottom: '0'}, initialSlideIn);
-
- // mouse over effects
- img.mouseover(function() {
- img.eq(currentItem).animate({bottom: '-1'}, 0);
- });
- img.mouseout(function() {
- img.eq(currentItem).animate({bottom: '0'}, 0);
- });
- // loop through the items
- var infiniteLoop = setInterval(function()
- {
- img.eq(currentItem).animate({ bottom: '-80'}, slideTime);
- if(currentItem == numberOfItems - 1) {
- currentItem = 0;
- } else {
- currentItem++;
- }
- img.eq(currentItem).delay(2000).animate({ bottom: '0'}, slideTime);
-
- }, itemInterval);
- }
- };
- InfiniteRotator.init();
This basically does this;
animate the first image up from the bottom.
wait 10 seconds
slide down that image
wait 2 seconds
slide up the next image.
etc..
there is a mouse over effect to lower the image by 1 pixel.
I've tried such things as setting a variable on mouse over, then applying if statements to the infiniteLoop. That didnt work, and ive looked around for similar problems and cant seem to find one.
I'm guessing i might have to do something with a timer maybe?
Hopefully someone can offer me a solution.
Thanks