jquery - 複数の if ステートメントが機能しない

Question

ここで何が間違っているのかわかりません。他にいくつかの if ステートメントがありますが、最初のステートメントだけが起動します。それは、それらがすべて同時に変数をチェックしていて、関数が終了したためだと考えました。そのため、この関数を継続的に呼び出して数値が変更されたかどうかを確認できるように、すべてを setTimeout に入れました。どうすればいいですか？

var slide=1;
    alert(slide);
        setTimeout(function(){
            if (slide == 1){
                slide = '2';
                alert(slide);
                $('img.slidephoto').attr('src',"images/slide2.png");
            }
            else if (slide == 2){
                slide = '3';
                alert(slide);
                $('img.slidephoto').attr('src',"images/slide3.png");

            }
            }, 1000);

Answer 1

setInterval()を使用して一定の間隔で関数を実行する必要があり、setTimeout()は関数を 1 回だけ実行します。

var slide = 1;
alert(slide);
setInterval(function () {
    if (slide == 1) {
        slide = '2';
        alert(slide);
        $('img.slidephoto').attr('src', "images/slide2.png");
    } else if (slide == 2) {
        slide = '3';
        alert(slide);
        $('img.slidephoto').attr('src', "images/slide3.png");

    }
}, 1000);

を使用してより適切に書くことができます

var slide = 1;
setInterval(function () {
    slide++;
    $('img.slidephoto').attr('src', "images/slide" + slide + ".png");
    //reset the value to 1 on upper bound
    // ex: slide = slide > 3 ? 0: slide; if there are maximum of 3 images like slide1.png, slide2.pnd and slide3.png
}, 1000);