0

特定の時間に特定の画像を表示するだけでなく、その日の他の時間にも回転する画像回転子を作成しようとしています。

最初に作成したときは、3 秒ごとに回転させただけでした。それはうまくいきました。しかし、別の画像を別の時間に表示するコードを追加すると、すべて一緒に機能しなくなりました。問題の一部は、setInterval と clearInterval をどこに置くべきかについて混乱していることです。とにかく、これがコードです。

     <img id="mainImage" src="/arts/rotatorpics/artzone.jpg" />

JS:

    var myImage = document.getElementById("mainImage");
    var imageArray = ["arts/rotatorpics/artzone.jpg",
         "arts/rotatorpics/bach.jpg",
         "arts/rotatorpics/burns.jpg"];
    var imageIndex = 0;
    var changeImage = function() {
        mainImage.setAttribute("src", imageArray[imageIndex]);
        imageIndex++;
        if (imageIndex >= imageArray.length) {
            imageIndex = 0;
        }

    }

    var newDay = new Date(); //create a new date object
    var dayNight = newDay.getHours(); //gets the time of day in hours

    function displayImages() {
        if (dayNight >= 10 && dayNight <= 12) {
            mainImage.setAttribute("src", imageArray[1]);
        } else if (dayNight >= 17 && dayNight <= 19) {
            mainImage.setAttribute("src", imageArray[2]);
        } else {
            var intervalHandle = setInterval(changeImage, 3000);
        }
        myImage.onclick = function() {
            clearInterval(intervalHandle);
        };
    }​
4

1 に答える 1

1

まず第一に、すべての変数はグローバルであるように見えます。そうしないでください。コードを実行する無名関数ラッパーを使用してください（すぐに（ここでIIFEについて読んでください。これは問題の一部ではありませんが、適切でクリーンなコーディングです）スタイル。

(function() {
  // your code here
})();

次に、問題の1つはdisplayImages関数だと思います。これは宣言しますが、呼び出すことはありません。

コードの最後で呼び出す必要があります（または単に省略します）

displayImages();

画像が10-12と17-19の間でスワップされないようにしたい場合は、コードが期待どおりに機能するはずです。このときでも画像を入れ替える必要がある場合は、setIntervalを最後のelse（displayImages関数内）に配置しないでください。

于 2012-12-08T18:33:01.443 に答える