I'll make it quick:

I need advice for 3 things.

  1. Having an image load while:
  2. A sequence of images loads and repeats until:
  3. A User hovers over the image and it displays a different sequence of images and then stops

What do you think is the best way of achieving this? Something like this:

Code JavaScript:
var image = document.getElementById('initialSequence');
image.images = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg'];
image.counter = 0;
image.onmouseover = function () {
    this.counter += 1;
    this.src = this.images[this.counter];