Here is something I quickly put together (haven't tested it at all - it's just for ideas) that you might be able to develop on. It shouldn't be hard.
var imgs = ['a.png', 'b.png', 'c.png'];
function Slideshow(img_list, container) {
var self = this;
var $slides = [];
var current = { 'ith': 0, '$slide': null };
function initialize() {
// Create the images
img_list.map(function (i) {
$slides.push($('<img>').attr('src', i).hide().appendTo(container));
});
current.$slide = $slides[0];
current.ith = 0;
// Initialize binds (jquery hotkeys or something)
$(document).bind('keydown', '>', function () {
// Do stuff
self.next();
});
$(document).bind('keydown', '<', function () {
// Do stuff
self.prev();
});
};
this.indexTo = function (i) {
current.$slide.hide();
current.$slide = $slides[i];
current.ith = i;
if (current.$slide ==== undefined) {
if (i < 0) {
current.$slide = $slides[$slides.length - 1];
current.ith = $slides.length - 1;
} else {
current.$slide = $slides[0];
current.ith = 0;
}
}
// Effects or something else
return current.$slide.show();
};
this.next = function () {
return self.indexTo(current.ith++);
};
this.prev = function () {
return self.indexTo(current.ith--);
};
initialize();
};