Please Help, I think I'm thinking to much into this.

Please Help, I think I'm thinking to much into this.

Alright,
let me describe what I'm trying to do, what I have so far, and why it is not working.

Baseline:
What I have is a string of 5 images that have .hover functions attached to them. so when you hover over a caption DIV pops up over it. But, the whole img/caption div is wrapped in a href tag to that when you click it will go to X URL.

So 5 images, wrapped with a URL, and have a hover function to show caption over image.

What I need to to is have these 5 Images auto scroll from right to left, 100% width, so it seems like the images are scrolling on the screen then off the screen.

But, what I would like is for one of the images (lets say img1.jpg) to start out at the center of the page (50% of the width). Then have a time set so that within (x)milliseconds (lets say 5000) image 2 (img2.jpg) will scroll to 50% of the page and img1.jpg gets push to the left.

So 5 images, wrapped with a URL, hover function to show caption, scroll from right to left, scroll to 50% width for 5 seconds then move on to the next image in the string of 5 pushing the images from right to left.

That's not it!
I would like "hot spots" for user control.
Hover over the right hot spot and the function speeds up by 50%, so it will take 2500milliseconds to perform the scrolling function.
I would like to have hover right to scroll right 50% faster, hover left to scroll 50% faster and when you are hovering over the image pausing the function.
Also, I would like to have it "endless" so if the user keeps scrolling one direction it will just have a loop of the 5 images.

So in the end:
5 images-
  • Wrapped with a URL
  • Hover to show caption DIV

Scroll on a timer-
  • Start with img1.jpg at 50% page width (with endless loop of images img5.jpg would be on the left of it, img2.jpg would be on the right if it)
  • Have a function that auto scrolls to the next image in line after (x)milliseconds
  • Endless loop of the images

User control of the scroll time using hot spots-
  • left/right 50% faster (2500 milliseconds)
  • hover on center image pause auto scroll function; hover off resumes the auto scroll  


This is what I have so far, but I really think it is in the wrong direction:
http://www.joblesspunkdesigns.com/comp/scroll/scroll.html

Thomas Kahn made an awesome scrolling plugin that I've been tinkering with, but I think it is not what I'm looking for.

I'm not really looking for a "scroll" pugin.
I'm really trying to do is display this image at (x) time at (x) location then move on to the next image and perform the same task. What really interested me in Thomas's plugin is the hot spots, but I bet there is a simpler way. Really if you take the hover function out of the equation all I want is the "right"/"left" button is perform the task (x) times faster, then with the "center" button just pause the timed function.

Anyways,
If you could help in anyway that would be great. I think I've thought about this too much and picking apart someone elses code hasn't helped me or directed me in the right direction...

Thank you for your time and reading this.
-Tim