jquery - カスタムイメージフェーダー

Question

多数の画像を循環して繰り返す画像フェーダー ギャラリーを作成しようとしています。画像にフェードアウトする部分はうまく書き込めたのですが、繰り返す方法がわかりません。私が使用している現在のコードは、無限にロードされるだけです。どうにかして無限ループを作成したためだと思いますが、それを回避する方法や方法がわかりません。

jQuery

//create array with the images id tags
var img_arr = [
            '#img1',
            '#img2',
            '#img3'
        ]
        var i = 0;
        arr_length = img_arr.length;
        gal_repeat = img_arr.length - 1;
        $(document).ready(function img_gallery() {
            //loop through the fade animation until the end of the array
            for (i = 0; i < arr_length; i++) {
                $(img_arr[i])
                    .animate(
                        { opacity: '1.0' }, 2000
                    );
                $('.img').delay(1000).animate({opacity: 0.0}, 2000);
                //THIS IS WHERE THE PROBLEM IS.  if I comment out this 'if' 
                //statement, the gallery works fine but doesn't repeat
                if (i == gal_repeat) {
                    i = 0;
                }
            }
        })

Answer 1

反復的なものには setInterval を使用できます。

//create array with the images id tags
var images = ['#img1', '#img2', '#img3'];
numberOfImages = images.length;

$(document).ready(function() {

    var num = 0;
    setInterval(function() {
        num = (num + 1) % numberOfImages;

        $(images[num]).animate({
            opacity: '1.0'
        }, 2000);

        $('.img').delay(1000).animate({
            opacity: 0.0
        }, 2000);

    }, 5000);
});