カスタムjqueryスライダー

Question

jqueryでスライダーを作成しようとしていて、最後に固執しています。

私は<ul>を作成してから、を表す<ul>というスライドに4 <li>を作成しました。次のボタンをクリックするとスライド1がアニメーション化され、スライド2になります。次のボタンをクリックすると、現在のスライドが次のアニメーションに移動します。しかし、どのように私は最初のスライドをロードする最後のスライドをアニメーション化するのですか？

左のプロパティの値を変更して、スライド間でアニメーション化しています。コードを以下に示します。私を案内してください。ありがとう！

 current = 0; 

     current_slide=1; 

     $(document).ready(function(){ 
      var totalSlides=$(".slider ul li").length; 
      $(".slider ul").removeAttr('width'); 
      $(".slider ul").attr('width',951*totalSlides); 

      $('#next img').click(function(){ 
       current_slide++; 
       current -= 951; 
       if(current_slide>totalSlides) 
        { 
         current=0; 
         current_slide=1; 
         $(".slider ul").css('left',0);  
        } 
       $(".slider ul").animate({"left":current+"px"}, "slow"); 
      }); 

     /* Previous button is not fully functional yet*/ 
      $('#prev img').click(function(){ 
       current_slide--; 
       current += 951; 
       if(current_slide==1) 
        {current=0;current_slide=totalSlides;} 
       $(".slider ul").animate({"left":current+"px"}, "slow"); 
      }); 
     }); 

Answer 1

"最初のスライドを読み込む"とは何か分かりませんが、スライドのどちらかの端に達したときに巻き戻すコードが表示されます。しかし、コードを見ると、$(".slider ul").css('left',0);を削除すればうまくいくはずです。

また、前のコードでは、現在の数字を0から951 * totalSlidesに変更して、正しい場所に配置しました。テストしていないので、951 * (totalSlides - 1)である必要があります。

current = 0; 

    current_slide=1; 

    $(document).ready(function(){ 
     var totalSlides=$(".slider ul li").length; 
     $(".slider ul").removeAttr('width'); 
     $(".slider ul").attr('width',951*totalSlides); 

     $('#next img').click(function(){ 
      current_slide++; 
      current -= 951; 
      if(current_slide>totalSlides) 
       { 
        current=0; 
        current_slide=1;  
       } 
      $(".slider ul").animate({"left":current+"px"}, "slow"); 
     }); 

    /* Previous button is not fully functional yet*/ 
     $('#prev img').click(function(){ 
      current_slide--; 
      current += 951; 
      if(current_slide==1) 
       { 
        current = 951 * totalSlides; 
        current_slide = totalSlides; 
       } 
      $(".slider ul").animate({"left":current+"px"}, "slow"); 
     }); 
    }); 

はまた、jQueryのでa bugあなたが否定>万個のピクセルを配置去ったとき、アニメーションがあることに注意してください - それは、バージョン1.5で修正される予定です。あなたは、多数のスライドを使用するのであれば、私はscrollLeft

---

を使用するようにコードを切り替えるお勧めします更新日：

さてあなたは無限のスライダーをしたい場合は、あなたが使用できる2つの方法があります：

は、

1. すべてのスライドをスタックし、現在のスライド以外のすべてを非表示にします。ユーザーが次のボタンまたはprevボタンをクリックすると、次のスライドを適切な側に置き、現在のものを表示から外し、新しいものを表示します。このメソッドを使用するjQuery Sliderをチェックしてください。

2. 第2の方法では、すべてのスライドを浮動させ、最初と最後のスライドを複製します。最初のスライドは最後のスライドの後に追加され、最後のスライドの複製は最初のスライドの前に追加されます。次に、最後のスライド上にいて[次へ]を押すと、複製されたスライドが表示されます。アニメーションが完了したら、最初のスライドにビューの位置を変更します。このメソッドは、私のjQuery AnythingSliderで使用されています。