为什么我不能正确地增加/减少？

Question

我一直在用自定义动画和prev / next功能构建一个jquery周期。 请参阅旧问题 。 我还不能弄清楚如何用cycle（）做到这一点。 所以我改建了这个： JSFiddle 。 但是，按照书面规定，每个函数（上一个周期和下一个周期）只能工作一次，因为我没有正确地增加/减少变量。 我做错了什么？

我不熟悉所有这些，因此欢迎并赞赏所有建设性的批评。

这是我的脚本：

$(document).ready(function() {

var slideCount = $('div.slide').length,
    centSlide = 0, // enter 1 to test prevcycle
    prevSlide = centSlide - 1,
    nextSlide = centSlide + 1;

// initialize
$('.slide:eq('+centSlide+')').addClass('liveslide');
if (prevSlide >= 0 && prevSlide < slideCount) {
    $('.slide:eq('+prevSlide+')').addClass('prev');    
};
if (nextSlide < slideCount) {
    $('.slide:eq('+nextSlide+')').addClass('next');    
};

// next cycle code
$('.slide:eq('+nextSlide+')').click(function() {
    nextcycle(centSlide, slideCount);
});

// prev cycle code
$('.slide:eq('+prevSlide+')').click(function() {
    prevcycle(centSlide, slideCount);
});

// construct functions
function nextcycle(x, y) {
    centSlide = x + 1;
    prevSlide = centSlide - 1;
    nextSlide = centSlide + 1;

    $('.slide:eq('+x+')').removeClass('prev');
    $('.slide:eq('+centSlide+')').animate({
        left: 0,
        height: '90%',
        top: 0    
    }, 1000).removeClass('next').addClass('liveslide');
    if (prevSlide >= 0 && prevSlide < y) {
        $('.slide:eq('+prevSlide+')').animate({
        left: '-79%', 
        height: '80%',
        top: '5%',
    }, 1000).removeClass('liveslide').addClass('prev');    
    };
    if (nextSlide < y) {
        $('.slide:eq('+nextSlide+')').css('left','100%').animate({
        left: '79%'
        }, 1000).addClass('next')
    };
};

function prevcycle(x, y) {
    centSlide = x - 1;
    prevSlide = centSlide - 1;
    nextSlide = centSlide + 1;
    n = x + 1;

    $('.slide:eq('+n+')').removeClass('next');
    $('.slide:eq('+centSlide+')').animate({
        left: 0,
        height: '90%',
        top: 0    
    }, 1000).removeClass('prev').addClass('liveslide');
    if (prevSlide >= 0 && prevSlide < y) {
        $('.slide:eq('+prevSlide+')').css('left','-100%').animate({
        left: '-79%'
        }, 1000).addClass('prev');    
    };
    if (nextSlide < y) {
        $('.slide:eq('+nextSlide+')').animate({
        left: '79%', 
        height: '80%',
        top: '5%',
    }, 1000).removeClass('liveslide').addClass('next');    
    };
};

}); // end ready​

Answer 1

问题是，当centSlide为0 ...时，您就在开始时设置了事件监听器，这意味着您仅在监听相对于其开始位置的事件。

我修改了您的点击处理程序，以考虑到centSlide的当前值，并且效果很好：

http://jsfiddle.net/hjNZD/

干杯

    $('.slide').click(function() {
      var index = $('.slide').index(this);
      if (index > centSlide) nextcycle(centSlide, slideCount);
      if (index < centSlide) prevcycle(centSlide, slideCount);
      return false;        
    });