0

我一直致力于构建一个带有自定义动画和 prev/next 功能的 jquery 循环。请参阅旧问题。我无法弄清楚如何使用循环（）来做到这一点。所以我建立了这个：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​
4

1 回答 1

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;        
    });
于 2013-01-03T00:52:07.533 回答