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);
});