Ну вот нашел кусок кода, который находится на той стадии, когда нужно реализовывать взаимодействие с DOM. Логика и обработка данных уже готова.
var Domino = (function(){
var sides = ['top', 'right', 'bottom', 'left'];
// Ajax
function ajax(opt){
var request = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
request.open(typeof opt.method == 'string' ? opt.method.toLowerCase() : 'GET', opt.url, opt.async != void 0 ? !!opt.async : true);
if(opt.options){
request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
request.setRequestHeader('Content-length', opt.options.length);
request.setRequestHeader('Connection', 'close');
request.send(opt.options);
} else {
request.send(null);
}
setTimeout(function(){
if(opt.callback && request.readyState == 4 && request.status == 200){
opt.callback(new Function('return ' + request.responseText)(), opt.data);
} else {
setTimeout(arguments.callee, 15);
}
}, 0);
}
// Animation
function slideImage(opt){
var steps = Math.floor(opt.time * opt.fps / 1000);
var timeOuts = [];
for(var i = 1; i <= steps; i++){
var time = Math.floor(1000 / opt.fps * i);
timeOuts.push(setTimeout((function(time){
var stop = false;
return function(){
var integer = opt.stop * (time * 100 / opt.time) / 100;
if(opt.call && (stop = opt.call(integer) === false)){
var l = timeOuts.length;
while(l){
clearTimeout(timeOuts[--l]);
}
}
if(stop || opt.stop == integer){
opt = steps = i = l = time = timeOuts = null;
}
}
})(time), time));
}
}
// Test
slideImage({
time: 1500,
fps: 30,
stop: 143
});
function Constructor(opt){
this.options = {};
for(var property in opt){
opt.hasOwnProperty(property) && (this.options[property] = opt[property]);
}
this.data = {
images: [],
nodes: [],
timeStamp: new Date
};
// Наполнение
var node = document.getElementById(opt.id);
var l = (node.clientWidth / this.options.width) * (node.clientHeight / this.options.height);
var fragment = document.createDocumentFragment();
while(l--){
var item = document.createElement('div');
// TODO: -2 убрать
item.style.cssText = 'width:' + (this.options.width-2) + 'px;' +
'height:' + (this.options.height-2) + 'px; border: #f00 1px solid; float:left;';
this.data.nodes.push(item);
fragment.appendChild(item);
}
node.appendChild(fragment);
}
Constructor.prototype = {
start: function(){
var data = this.data;
(function(){
if(!data.images.length){
return;
}
var item = data.images.shift();
if(data.loaded && item.timeStamp != data.timeStamp){
return arguments.callee();
}
var activeNode = data.nodes[Math.floor(Math.random() * data.nodes.length)];
data.images.push(item);
data.timer = setTimeout(arguments.callee, 1000);
})();
},
stop: function(){
clearTimeout(this.data.timer);
},
update: (function(){
function onLoadImage(){
this.data.options.img = this;
this.data.objData.images.unshift(this.data.options);
!this.data.index && (this.data.objData.loaded = true);
delete this.data, this.onload;
}
function onLoadData(result, data){
data.timeStamp = new Date;
var length = result.imgs.length;
while(length){
var item = new Image();
item.data = {
objData: data,
options: result.imgs[--length],
index: length
};
item.timeStamp = data.timeStamp;
item.onload = onLoadImage;
item.src = item.data.options.img;
}
delete data.loaded;
}
return function(url){
ajax({
url: typeof url == 'string' && url.length ? url : this.options.url,
callback: onLoadData,
data: this.data
});
};
})()
};
return Constructor;
})();
var dm = new Domino({
width: 50,
height: 50,
url: 'req.js',
speed: 30,
id: 'contaner'
});
dm.start();
В двух словах, это реализация слайда группы каринок.
Сами картинки не меняются, только обработка данных. Пишется как самостоятельное приложение, без привязки к фреймворкам.