kex15i10,
вариант на скорую руку ...
без прелоадера картинок
<!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() {
var slider = $("#slider");
var height = slider.height();
var width = slider.width();
function load_img(next, src, x, y) {
var w = width / x | 0;
var h = height / y | 0;
slider.height(height = h * y);
slider.width(width = w * x);
slider.css({
backgroundSize: width + "px " + height + "px",
backgroundImage: "url(" + next + ")"
});
var n = 0,
arr = Array(x * y);
$.each(arr, function(i, el) {
!n && y--;
arr[i] = $("<div>", {
css: {
left: n * w,
top: y * h,
width: w,
height: h,
backgroundImage: "url(" + src + ")",
backgroundPosition: -n * w + "px " + -y * h + "px",
backgroundSize: width + "px " +
height + "px"
}
}).prependTo(slider);
n = ++n % x
});
return arr
}
function show(arr) {
if (!arr.length) setTimeout(go, 3E3);
var i = Math.floor(Math.random() * arr.length);
i = arr.splice(i, 1)[0];
i.css({
"z-index": 100
}).animate({
top: height
}, {
easing: "easeOutCirc",
duration: 1200,
complete: function() {
i.remove();
show(arr)
}
})
}
var arrSrc = ["http://www.kudatotam.ru/upload/1/3099_3_s.jpg", "http://333v.ru/uploads/fb/fb4a0febf5211a49f33cd0a5edefcea0.jpg", "http://wallbattle.ru/ph/41/zelen_dereva_ls_1920x1080.jpg"];
function go() {
arrSrc.push(arrSrc.shift());
var arr = load_img(arrSrc[1], arrSrc[0], 4, 3);
show(arr)
}
go()
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>