爲什麼我沒有正確遞增/遞減？

Question

我一直在努力構建一個jQuery自定義動畫和prev/next功能的循環。請參閱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;   
    });