0

カスタムアニメーションと前/次の機能を備えたjqueryサイクルの構築に取り組んできました。古い質問を参照してください。cycle() でこれを行う方法を理解できませんでした。そこで、代わりにこれを作成しました: JSFiddle。ただし、書かれているように、変数を正しくインクリメント/デクリメントしていないため、各関数 (prevcycle と nextcycle) は 1 回しか機能しません。私が間違っていることは何ですか？

私はこれらすべてに慣れていないので、建設的な批判はすべて歓迎され、高く評価されます。

これが私のスクリプトです：

$(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 に答える