Jquery 自定义图像推子

我正在尝试制作一个图像渐变库，可以循环浏览大量图像，然后重复。我已经成功地写出了在图像中消失的部分，但我不知道如何让它重复。我现在使用的代码是无限加载的，我想是因为我以某种方式创建了一个无限循环，但我不确定如何或如何绕过它

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

//使用图像id标记创建数组
变量img_arr=[
“#img1”，
"img2",，
"img3"
]
var i=0；
arr_length=img_arr.length；
gal_repeat=img_arr.length-1；
$（文档）.ready（函数img_gallery（）{
//循环播放淡入淡出动画，直到阵列结束
对于（i=0；i

您可以对重复的内容使用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);
});

---

无限循环是因为在for循环中将i的值设置回0，并且if语句总是在循环的最后一次运行时命中，因此无限循环。我建议采用一种不同的方法来建立图像的结尾，而不是循环计数器变量。我知道它会创建一个无限循环，但它不应该循环回开始，直到所有图像都随着延迟而褪色吗？我想我的问题是想弄明白为什么它会导致页面崩溃你的循环没有截止日期！？，根据i的一个原理，循环中没有停止的地方，当我到达最后一次迭代时，你会一直重置为零。你需要重新思考你的逻辑。