为什么我不能正确地递增/递减?

Why am I not incrementing/decrementing correctly?

本文关键字：递减 不能 正确地 为什么      更新时间：2023-09-26

我一直致力于构建一个具有自定义动画和上/下一个功能的jquery循环。参见老问题。我还没能弄清楚如何用cycle()做到这一点。所以我构建了这个:JSFiddle。然而，正如所写的，每个函数(precycle和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​

问题是您在开始时设置事件侦听器，当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;        
    });
相关文章：