даже если везде поменять бэкграунд на бэкграунд имидж:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>2dcarusel</title>
<style type="text/css">
html, body{
width:100%;
}
html, body, div{
margin:0;
padding:0;
border:0;
}
#contcar{
position:relative;
top:50px;
margin:0 auto;
}
#container{
position:relative;
overflow:hidden;
}
#container div, #contcar div{
display:block;
position:absolute;
}
</style>
<script type="text/javascript" language="JavaScript">
window.onload = function(){
var width = 150; //ширина одного изображения
var height = 100; //высота одного изображения
var colx = 3; //количество изображений по горизонтали
var coly = 4; //количество изображений по вертикали
var but_size = 15; //размер кнопки по горизонтали (если справа или слева) или вертикали (если сверху или снизу)
var butbackground_ud = 'url(ud.jpg) no-repeat 0 0'; //изображение кнопки сверху или снизу от контейнера
var butbackground_lr = 'url(lr.jpg) no-repeat 0 0'; //изображение кнопки слева или справа от контейнера
var container = document.getElementById('container');
container.style.width = width * colx + 'px';
container.style.height = height * coly + 'px';
document.getElementById('contcar').style.width = width * colx + 'px';
document.getElementById('contcar').style.height = height * coly + 'px';
var cont = container.getElementsByTagName('div');
/* for (var i = 0; i < cont.length; i++) cont[i].innerHTML = i; */
var dop = 0;
while (cont.length < colx * coly) {
cont[cont.length] = cont[dop];
var dopblock = document.createElement('div');
dopblock.style.backgroundImage = cont[dop].style.backgroundImage;
container.appendChild(dopblock);
dop++;
}
cont = container.getElementsByTagName('div');
var block = [];
for (var i = 0; i < colx * coly; i++) block[i] = cont[i];
var idblock = [];
for (var i = 0; i < coly; i++){
for (var j = 0; j < colx; j++){
var bl = block[i * colx + j];
bl.style.width = width + 'px';
bl.style.height = height + 'px';
bl.style.left = width * j + 'px';
bl.style.top = height * i + 'px';
bl.id = 'b' + (i * colx + j);
idblock[i * colx + j] = bl.id;
/* console.log(bl.id); */
}
}
var button = [];
for (var i = 0; i < 2 * (colx + coly); i++) {
var but = document.createElement('DIV');
if (i < colx * 2) {
but.style.background = butbackground_ud;
but.style.width = width + 'px';
but.style.height = but_size + 'px';
but.style.left = ((i < colx) ? i * width : (i - colx) * width) + 'px';
but.style.top = ((i < colx) ? - but_size : coly * height) + 'px';
}
else {
but.style.background = butbackground_lr;
but.style.width = but_size + 'px';
but.style.height = height + 'px';
but.style.left = ((i > 2 * colx + coly - 1) ? colx * width : - but_size) + 'px';
but.style.top = ((i > 2 * colx + coly - 1) ? (i - 2 * colx - coly) * height : (i - 2 * colx) * height) + 'px';
}
but.style.cursor = 'pointer';
but.id = 'but' + i;
document.getElementById('contcar').appendChild(but);
button[i] = document.getElementById('but' + i);
}
var stop = 0;
var z = setInterval(function() {
kuda (Math.floor(Math.random() * (2 * (colx + coly))));
}, 1000);
button.forEach(function(but, k) {
but.onclick = function() {
kuda(k);
}
})
var x, y;
var curblock;
window.onmousedown = startmove;
function startmove(e) {
clearInterval(z);
x = e.pageX;
y = e.pageY;
curblock = whichblock();
window.onmousemove = wichmove;
}
function wichmove(e) {
if (curblock != null) {
setTimeout(function() {
var x1 = e.pageX - x;
var y1 = e.pageY - y;
var r;
if (Math.abs(x1) > Math.abs(y1)) {
if (x1 > 0) {
r = 2 * colx + coly + Math.floor(curblock / colx);
}
else if (x1 < 0) {
r = 2 * colx + Math.floor(curblock / colx);
}
}
else if (Math.abs(x1) < Math.abs(y1)) {
if (y1 < 0) {
r = curblock % colx;
}
else if (y1 > 0) {
r = colx + curblock % colx;
}
}
kuda(r);
x1 = 0;
y1 = 0;
window.onmousemove = false;
}, 50);
}
return false;
}
function whichblock() {
var cur = null;
block = idblock.map(function (id) {
return document.getElementById(id);
});
for (var i = 0; i < block.length; i++) {
if (
(block[i].offsetLeft < x - document.getElementById('contcar').offsetLeft) &&
(block[i].offsetLeft + block[i].offsetWidth > x - document.getElementById('contcar').offsetLeft) &&
(block[i].offsetTop < y - document.getElementById('contcar').offsetTop) &&
(block[i].offsetTop + block[i].offsetHeight > y - document.getElementById('contcar').offsetTop)
) {
cur = i;
break;
}
}
return cur;
}
function kuda(k) {
if (stop == 0) {
stop = 1;
block = idblock.map(function (id) {
return document.getElementById(id);
});
var a;
var b;
var size1;
var size2;
var prop1;
var prop2;
var step;
var m;
var colmove;
var blockmove = [];
var current = 0;
if (k < colx * 2) {
size1 = height;
size2 = width;
prop1 = 'top';
prop2 = 'left';
colmove = coly;
if (k < colx) {
step = -1;
m = k;
}
else {
step = 1;
m = k - colx;
}
}
else {
size1 = width;
size2 = height;
prop1 = 'left';
prop2 = 'top';
colmove = colx;
if (k < 2 * colx + coly) {
step = -1;
m = k - 2 * colx;
}
else {
step = 1;
m = k - 2 * colx - coly;
}
}
for (var i = 0; i < coly; i++){
for (var j = 0; j < colx; j++){
var bl = block[i * colx + j];
if (k < colx * 2) {
if (m == j) {
blockmove[current] = bl;
current++;
}
}
else {
if (m == i) {
blockmove[current] = bl;
current++;
}
}
}
}
var newblock = document.createElement('div');
newblock.style.width = width + 'px';
newblock.style.height = height + 'px';
if (blockmove[blockmove.length - 1] != null) {
if (step == 1) {
newblock.style.backgroundImage = blockmove[blockmove.length - 1].style.backgroundImage;
newblock.style[prop1] = - size1 + 'px';
blockmove.unshift(newblock);
a = 1;
}
else {
newblock.style.backgroundImage = blockmove[0].style.backgroundImage;
newblock.style[prop1] = colmove * size1 + 'px';
blockmove.push(newblock);
a = 0;
}
newblock.style[prop2] = m * size2 + 'px';
container.appendChild(newblock);
for (var i = 0; i < blockmove.length; i++) {
move(blockmove[i], prop1, (i - a) * size1, (i - a + step) * size1);
}
setTimeout(function() {
if (step == 1) {
for (var i = 0; i < colmove; i++) blockmove[i].id = blockmove[i + 1].id;
container.removeChild(blockmove[colmove]);
}
else{
for (var i = colmove; i > 0; i--) blockmove[i].id = blockmove[i - 1].id;
container.removeChild(blockmove[0]);
}
stop = 0;
}, 350);
}
else {
stop = 0;
}
}
}
};
function move(elem, prop, start, end) {
animateProp({
delay: 10,
duration: 300,
delta: makeEaseInOut(quad),
start: start,
end: end,
prop: prop,
elem: elem
});
}
function animate(opts) {
var start = new Date;
var delta = opts.delta || linear;
var timer = setInterval(function() {
var progress = (new Date - start) / opts.duration;
if (progress > 1) progress = 1;
opts.step( delta(progress) );
if (progress == 1) {
clearInterval(timer);
opts.complete && opts.complete();
}
}, opts.delay || 13);
return timer;
}
function animateProp(opts) {
var start = opts.start, end = opts.end, prop = opts.prop;
opts.step = function(delta) {
var value = Math.round(start + (end - start)*delta);
opts.elem.style[prop] = value + 'px';
}
return animate(opts);
}
function quad(progress) {
return Math.pow(progress, 2);
}
function makeEaseInOut(delta) {
return function(progress) {
if (progress < .5)
return delta(2*progress) / 2;
else
return (2 - delta(2*(1-progress))) / 2;
}
}
</script>
</head>
<body>
<div id="contcar">
<div id="container">
<div style="background-image:url(1.jpg);"></div>
<div style="background-image:url(2.jpg);"></div>
<div style="background-image:url(3.jpg);"></div>
<div style="background-image:url(4.jpg);"></div>
<div style="background-image:url(5.jpg);"></div>
<div style="background-image:url(6.jpg);"></div>
<div style="background-image:url(7.jpg);"></div>
<div style="background-image:url(8.jpg);"></div>
<div style="background-image:url(9.jpg);"></div>
</div>
</div>
</body>
</html>
