css做滑动翻页效果,CSS3旋转翻页特效

$(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');

}

}

});