$(function() {
fn(10, 7);
function fn(numX, numY) {
var $ul = $('.pic ul');
var $btn = $('.btn div');
var ulW = $ul.width(),
ulH = $ul.height();
var $li;
var liW = ulW / numX,
liH = ulH / numY;
var ulIndex = 1;
var onOff = true;
$ul.each(function() {
var s = '';
for (var i = 0; i < numX * numY; i++) {
s += '
'
}
$(this).append(s);
});
$li = $('.pic ul li');
$li.each(function(i) {
i %= numX * numY;
var iX = i % numX;
var iY = parseInt(i / numX);
this.x = iX;
this.y = iY;
$(this).css({
width: liW - 2 + 'px',
height: liH - 2 + 'px',
backgroundPosition: ( - liW * iX) + 'px ' + ( - liH * iY) + 'px',
left: liW * iX + 'px',
top: liH * iY + 'px'
});
});
$btn.click(function() {
if (onOff) {
onOff = !onOff;
var index = $(this).index();
var $ulLi;
if (index) {
zIndexNext();
var sum = numX + numY - 2;
$ulLi = $ul.eq(ulIndex).find('li');
ulIndex++;
var timer = setInterval(function() {
$ulLi.each(function() {
if (this.x + this.y == sum) {
$(this).removeClass('last move').addClass('on move');
}
});
sum--;
if (sum < 0) {
clearInterval(timer);
setTimeout(function() {
onOff = !onOff;
if (ulIndex == $ul.length - 1) {
$li.removeClass('on last move');
$ul.removeClass('next now');
$ul.eq(1).addClass('next');
ulIndex = 1;
}
},
1500);
}
},
50);
} else {
zIndexLast();
ulIndex--;
$ulLi = $ul.eq(ulIndex).find('li');
$ulLi.removeClass('move').addClass('on');
var sum = 0;
var timer = setInterval(function() {
$ulLi.each(function() {
if (this.x + this.y == sum) {
$(this).addClass('last move');
}
});
sum++;
if (sum > numX + numY - 2) {
clearInterval(timer);
setTimeout(function() {
onOff = !onOff;
if (ulIndex == 0) {
$li.removeClass('on last');
$ul.removeClass('next now');
$ul.eq($ul.length - 2).addClass('next');
ulIndex = $ul.length - 2;
}
},
1500);
}
},
50);
}
}
});
function zIndexNext() {
var i = ulIndex + 1;
$ul.eq(ulIndex).addClass('now').siblings().removeClass('now');
$ul.eq(i).addClass('next').siblings().removeClass('next');
}
function zIndexLast() {
var i = ulIndex - 1;
$ul.eq(ulIndex).addClass('next').siblings().removeClass('next');
$ul.eq(i).addClass('now').siblings().removeClass('now');
}
}
});