<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#slider{
position: relative;
width: 500px;
height: 300px;
background-color: #000000;
margin: 0;
padding: 0;
overflow: hidden;
}
#slider div{
margin: 0;
padding: 0;
position: absolute;
background-color: #0000FF;
background-repeat: no-repeat;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js">
</script>
<script>
$(function() {
function n(e, p, c, b) {
var a = g / c | 0,
k = h / b | 0;
d.height(h = k * b);
d.width(g = a * c);
d.css({
backgroundSize: g + "px " + h + "px",
backgroundImage: "url(" + e + ")"
});
var f = 0,
l = Array(c * b);
$.each(l, function(e, m) {
!f && b--;
l[e] = $("<div>", {
css: {
left: f * a,
top: b * k,
width: a,
height: k,
backgroundImage: "url(" + p + ")",
backgroundPosition: -f * a + "px " + -b * k + "px",
backgroundSize: g + "px " + h + "px"
}
}).prependTo(d);
f = ++f % c
});
return l
}
function q(a, n) {
(r ^= 1) && a.reverse();
$.when.apply(null, a.map(function(k, c) {
var b = (n/a.length) * c;
return k.css({
"z-index": 100
}).delay(b).animate({
opacity: 0
}, {
easing: "easeOutCirc",
duration: 300
})
})).done(function() {
a.forEach(function(a) {
a.remove()
});
setTimeout(m, 1E3)
})
}
var op = [1,100];
function m() {
Math.random() < .2 && op.reverse();
var e = n(a[1].src, a[0].src, op[0], op[1]);
q(e,1200);
a.push(a.shift())
}
var d = $("#slider"),
h = d.height(),
g = d.width(),
r = 0,
a = ["http://kamozin.com/storage/album/1/n/7/b10606515b84ab728fddc89.jpg", "http://www.fonstola.ru/download.php?file=201308/1024x600/fonstola.ru-103371.jpg", "http://japonskie.ru/puzzle/source/gori_na_zakate.jpg"],
a = function(a, d) {
function c() {
b.push(this);
2 == b.length && d()
}
var b = [];
a.forEach(function(a) {
var b = new Image;
b.onload = c;
b.src = a
});
return b
}(a, m)
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>