jQueryを使用してスライドショーを作成するにはどうすればよいですか？

Question

jQueryを使ってスライドショーを作成しようとしましたが、私のクラスの配列を作るのが難しいと感じていますslides。下のコードに何か問題がありますか？

$(document).ready(function() { 
    var slideIndex = 0; 
    var slides = $('.slides'); 
    slides[slideIndex].show(); 

    $('.next').click(function() { 
     var i; 
     if (slideIndex > slides.length) { 
      slideIndex = 0; 
     } 

     for (i = 0; i < slides.length; i++) { 
      slides[i].hide(); 
     } 

     slideIndex++; 
     slides[slideIndex].show(); 

     var pageNum = slideIndex + 1; 
     $('.numbertext').innerHTML(pageNum + "/" + slides.length); 
    }); 

    $('.prev').click(function() { 
     var i; 

     if (slideIndex < 0) { 
      slideIndex = slides.length; 
     } 

     for (i = 0; i < slides.length; i++) { 
      slides[i].hide(); 
     } 

     slideIndex--; 
     slides[slideIndex].show(); 
    }); 
}); 

Answer 1

slidesアレイには、jQueryオブジェクトではなくDOMノードがあります。だから、hide()またはshow()のように、個々の要素にjQueryメソッドを適用する場合は、その要素をjQueryオブジェクトとして取得する必要があります。その目的のために配列要素を[i]としないでください。eq(i)メソッドを適用すると、show/hideメソッドが利用できるjQueryオブジェクトが得られます。例えば

、変更：

slides[slideIndex].show(); 

へ：

slides.eq(slideIndex).show(); 

...など。

関連する理由から、各要素を非表示にするためにslidesをループする必要はありません。

を置き換えます：と

for (i = 0; i < slides.length; i++) { 
    slides[i].hide(); 
} 

：

slides.hide(); 

もう一つの問題は、あなたの範囲はslideIndexをチェックしてあなただけのコレクションを非表示にすることができます。それは間違った場所に配置され、かつslideIndex > slides.lengthはちょうど後のあなたはslideIndex++やslideIndex--を行い、それらのif条件slideIndex >= slides.length

場所でなければなりません。