1

だから私はhtml、css、jQueryを使って無限のカルーセルを作ってみましたが、戻るボタン以外はすべて機能しています。http://jsfiddle.net/e2SKk/でコードを確認できます。私が実際にこれを行っているのは、もっと多くのことを学ぶ機会が得られると思ったからですが、コードのレイアウトやテクニックについての批判は役に立ちます!

具体的には、このコードは機能していないようです

else if(loopPrev==true){
            sliderActive=true
            $('.item-holder').css({
                'left':clonePos
            });
            $('.item-holder').animate({
                'left':holderPos+$('.slider').width()+'px'
            },function(){
                sliderActive=false;
            });
        };

それは単なるスニペットであり、残りがなければあまり意味がありません!

4

2 に答える 2

1

あなたがここに行っているかなりクールな小さなスライダー！言うほど初心者か？あなたは jQuery をよく理解できたと思います。また、忘れる前に、あなたのコメントに対処します。stackoverflowに何かを投稿すると...おそらく多くの人に見られます:)。ここに来て、何の助けも得られないことはめったにありません (常に答えが得られるとは限りませんが)。

幸いなことに、私はあなたの問題を発見しました! それはここにあります：

else if(loopPrev==true){
    sliderActive=true
    $('.item-holder').css({
        'left':clonePos
    });
    $('.item-holder').animate({
        'left':holderPos+$('.slider').width()+'px'
    },function(){
        sliderActive=false;
    });
};

ループするかどうかを確認し、スライダーをアクティブに設定し、次のスライドをインデックスの最後のスライドに設定し (その後、同時に押し込みます)、通常どおりにアニメーション化します。これにより、2 つの移動が発生します。最初はインデックスの後ろに移動し、次に holderPos+$('.slider').width()+'px' の値に移動します...したがって、奇妙な動作になります。これは役立つはずです：

 else if(loopPrev==true){
     sliderActive=true;
     $('.item-holder').animate({
         'left':"-1800px"
     }, function(){ 
         sliderActive=false; 
     })
 };

値「-1800px」は、事前に計算したバッファ内の最後のスライドにすぎません...これを clonePos 変数に問題なく置き換えることができるはずです。

*編集: また、変数 clonePos を次のように変更する必要があります。

var clonePos = '-'+($('.item').index()-1)*($('.slider').width());

これにより、インデックスの最後のスライドと最初のスライドを切り替えるときのバグが解消されます (必要に応じて「スムーズな移行」)。

**

パート II

**

無限にスクロールできるという錯覚を実現するには、「左押し」アニメーション呼び出し内にコールバック「プッシュ バック」関数を埋め込む必要があります。ここで遅くなったので、これから書くコードをテストしていませんが、うまくいくと確信しています。

else if(loopPrev==true){
 sliderActive=true;
 $('.item-holder').animate({
     'left':clonePos
 }, function(){
     $(this).css('left':holderPos+$('.slider').width()+'px');
     sliderActive=false; 
 })
};

見てみると、これは私が提供した元の回答と大差ありません。アニメーションのコールバック関数を取得し、位置を元のインデックス位置にスリップさせる呼び出しを追加しただけです。繰り返しますが、テストされていませんが、.animate() がクローンにスライドし、それが完了すると、コールバックはクローンをオリジナルと交換し、スライダーを無効にします。

あなたは遠く離れていませんでした！animate 関数のセマンティック ルールを次に示します (コールバックの動作方法を理解しやすくするため)。

animate( params, [duration], [easing], [callback] )
  • params は左の呼び出しです (この場合は複製されたスライドへ)
  • ここでは期間は無視されます
  • ここではイージングは​​無視されます
  • callback は、ちょっとしたデビッド コッパーフィールド スワップを行う function() 呼び出しです。

お役に立てれば！

于 2012-10-08T00:39:15.417 に答える
1

jQuery は、短いスクリプトを作成するのに優れています。あなたのスライダーのコードは次のとおりです。

var width = $('.slider').width();
$('.item').css({width:width});
var $holder = $('.item-holder').css({left:-width}).prepend($('.item:last'));

$('.prev').click(function(){
    $holder.not(':animated').css({left:-2*width}).prepend($('.item:last')).animate({left:-width});
});
$('.next').click(function(){
    $holder.not(':animated').css({left:0}).append($('.item:first')).animate({left:-width});
});

それが完全なコードです。

http://jsfiddle.net/creativecouple/YPU2d/でこれを実際に見てください

于 2012-10-08T14:25:38.523 に答える