イメージのカルーセルが進まない（HTML/JavaScript）

Question

私は、ページを訪れた直後にカルーセルを開始し、一連のイメージを2.5秒ごとに循環させようとしていますが、最初のイメージを通過しません。私はこことw3schoolsを見回しましたが、私の問題がどこにあるのか特定できませんでした。どんな助けでも大歓迎です！次のように

JavaScriptは次のとおりです。

window.onload slideShow(); 
var i=0; 

function slideShow() { 
    window.setInterval("nextSlide()", 2500); 
} 

function nextSlide() { 
    var images["images/stockton0.jpg", 
     "images/stockton1.jpg" 
     "images/stockton2.jpg" 
     "images/stockton3.jpg" 
     "images/stockton4.jpg" 
     "images/stockton5.jpg" 
     "images/stockton6.jpg" 
     "images/stockton7.jpg" 
     "images/stockton8.jpg" 
     "images/stockton9.jpg" 
     "images/stockton10.jpg"] 
    var photo = document.getElementByClass("stocktonPics"); 
    photo.src = images[i]; 
    i++; 
} 

HTMLコード：

<img class="stocktonPics" src="images/stockton0.jpg" alt="slides"> 

Answer 1

良いヒントがエラーのコンソールをチェックすることです。

コードの流れに問題はありません。さらに、保守性、読みやすさ、または意味的に正しいものにするためのヒントがあります。

は、あなたは、単に存在しないwindow.onload = slideShow;

そしてdocument.getElementByClassで=を忘れてしまいました。あなたはそのclassで要素の配列を取得するためにdocument.getElementsByClassName(...)を使用し、最終的にそのような[0]との最初の項目を取得する必要があります：

var photo = document.getElementsByClassName("stocktonPics")[0];は

window.onloadがあるときslideShowはもはや、それを呼び出すために()を持っていることに注意してくださいそれに割り当てられている。これは、slideShow()（この場合はundefined）を呼び出した結果ではなく、slideShow関数にwindow.onloadを割り当てているため、何も返されないためです。

あなたのイメージアレイは、このように割り当てる必要があります：あなたがすべきvar images = [ a, b, c ]

他の事は、あなたがより簡単にそれを使用して、それを変更することができますので、むしろ、機能の範囲外画像の配列を保持しています（最適化を数えない場合は）関数が呼び出される度に1つを作成するよりもそして、最後にwindow.setInterval(a, b)は、eval() ed（またはそれと同等）になる文字列、またはあなた自身が行った文字列のいずれかを取ることができます。あなたの場合、あなたが望むのは単に関数：window.setInterval(nextSlide, 2500)です。

はここで最後の完全なコードです：

var i=0; 
var images=[ 
     "images/stockton0.jpg", 
     "images/stockton1.jpg", 
     "images/stockton2.jpg", 
     "images/stockton3.jpg", 
     "images/stockton4.jpg", 
     "images/stockton5.jpg", 
     "images/stockton6.jpg", 
     "images/stockton7.jpg", 
     "images/stockton8.jpg", 
     "images/stockton9.jpg", 
     "images/stockton10.jpg" ]; 

function slideShow() { 
    window.setInterval(nextSlide, 2500); 
} 

function nextSlide() { 
    var photo = document.getElementsByClassName("stocktonPics")[0]; 
    photo.src = images[i]; 
    i++; 
} 

window.onload = slideShow; 

Answer 2

getElementsByClass 方法があるような配列要素がそう、

オブジェクト、あなたが最初の要素オブジェクトを取得し、SRC attrのを設定するために[0]を使うべきでしょう。

var pics = document.getElementsByClassName("stocktonPics")

それはのような配列要素が

var firstPic = document.getElementsByClassName("stocktonPics")[0]

オブジェクトそう1要素オブジェクト

let i = 0; 
 
const images = ["images/stockton0.jpg", 
 
       "images/stockton1.jpg", 
 
       "images/stockton2.jpg", 
 
       "images/stockton3.jpg", 
 
       "images/stockton4.jpg", 
 
       "images/stockton5.jpg", 
 
       "images/stockton6.jpg", 
 
       "images/stockton7.jpg", 
 
       "images/stockton8.jpg", 
 
       "images/stockton9.jpg", 
 
       "images/stockton10.jpg"]; 
 
const stockton = document.getElementsByClassName("example")[0]; 
 

 
const slideShow =() => { 
 
    window.setInterval(nextSlide, 2500); 
 
} 
 

 
const nextSlide =() => { 
 
    stockton.src = images[i]; 
 
    if(i >= images.length - 1) { 
 
     i = 0; 
 
    } else { 
 
     i++; 
 
    } 
 
    console.log(i, stockton) 
 
} 
 
slideShow()

<img class="example">