2

http://cambridgeuplighting.com/portfolio

スライドショーがいずれかの端に達したときに scrollTo 関数の Next および Prev コントロールをフェードする関数を作成しようとしています。良いスタートを切ったが、思い通りにいかない。クリックが最後に到達する前にフェードアウトするコントロールが必要です。今は最後に到達し、次のクリック (最後にあるためスクロールしません) でコントロールがフェードします。

ここに私のコードがあります。

jQuery (HTML と CSS については、上記のサイトへのリンクを参照してください)

 jQuery(function( $ ){
    var itemSize = $('div.portfolioPost').size();
    var containerWidth = itemSize*240;
    //set the width of the container depending on how many post items are there
    $('#postContainer').css({'width': containerWidth })
    //find the relative position of the end point by getting the negative value of the container width minus 961 (extra pixel is to account for IE difference)
    var endPoint = 0-containerWidth+961;
    $('.olderEvents').click(function () {
        $('.newerEvents').fadeTo(350, 1.0)
        var slidePos = $('#postContainer').position();
        if (slidePos.left<=endPoint) {
            $('.olderEvents').fadeTo(350, 0.1)
        } else {
            $('#slideScreen').scrollTo('+=960', 700 );
        }   
    });

    $('.newerEvents').click(function () {
        $('.olderEvents').fadeTo(350, 1.0)
        var slidePos = $('#postContainer').position();
            //relative position of 0 means the slideshow is at the other end
        if (slidePos.left==0) {
            $('.newerEvents').fadeTo(350, 0.1)
        } else {
            $('#slideScreen').scrollTo('-=960', 700 );
        }
    });
});
4

2 に答える 2

0

@ greg-J: コントロールを無効にすることの有効性に関するあなたのコメントに同意します。リストの最後に到達すると最初の要素に戻るコードを次に示します。例を @ http://cambridgeuplighting.com/portfolioで見る

jQuery(function( $ ){
        var itemSize = $('div.portfolioPost').size();
    var containerWidth = itemSize*240;
    $('#postContainer').css({'width': containerWidth })
    var endPoint = 0-containerWidth+961;
    $('.olderEvents').click(function () {
        var slidePos = $('#postContainer').position();
        if (slidePos.left<=endPoint) {
            $('#slideScreen').scrollTo('-='+containerWidth, 1000 );
        } else {
            $('#slideScreen').scrollTo('+=480', 500 );
        }   
    });

    $('.newerEvents').click(function () {
        var slidePos = $('#postContainer').position();
        if (slidePos.left==0) {
            $('#slideScreen').scrollTo('+='+containerWidth, 1000);
        } else {
            $('#slideScreen').scrollTo('-=480', 500 );
        }
    });
});
于 2010-02-17T15:27:55.120 に答える