Question

我一直致力于使用自定义动画和上一个/下一个功能构建一个jquery循环。见Old Question。我无法弄清楚如何使用cycle（）来做到这一点。所以我建造了这个：JSFiddle。但是，正如所写的那样，每个函数（prevcycle和nextcycle）只能运行一次，因为我没有正确地递增/递减我的变量。我做错了什么？

我是所有这一切的新手所以所有建设性的批评都受到欢迎和赞赏。

这是我的剧本：

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

为什么我没有正确递增/递减？

1 个答案: