simple slideshow

http://stackoverflow.com/questions/12164828/jquery-swap-animate-array-of-sequential-jpg-images

HTML

<img id="slideshow" src="http://jsfiddle.net/img/logo.png" alt="" width="200" height="200" />

<br/>
<button onclick="cycle_images()">next image</button>

CSS

#slideshow { border:1px solid red; }

JavaScript

var images = [];
var i = 0;
var interval = null;

function preload_images() {
/*
    var i;
    for (i = 0; i < 126; i++) {
        images[i] = new Image();
        images[i].src = "../Content/images/IM0-Frame" + i + ".jpg";
    }
*/
    var image = new Image();
    image.src = "http://jsfiddle.net/img/logo.png";
    images[0] = image;
    image = new Image();
    image.src = "http://jsfiddle.net/img/top-bg.png";
    images[1] = image;
    image = new Image();
    image.src = "http://jsfiddle.net/img/sprites.png";
    images[2] = image;
}

preload_images();

function cycle_images() {
    i = (i < 2) ? i + 1 : 0;
    document.getElementById('slideshow').src = images[i].src;
    document.body.appendChild(document.createTextNode(i + ' '));
}

$(document).ready(function() {
    interval = setInterval(cycle_images, 2000);
    $('#slideshow').hover(function() {
        clearInterval(interval);
        //console.log('cycle paused');
    }, function() {
        //interval = setInterval(cycle_images, 2000);
        //console.log('cycle continues');
    });
});