javascript - 使用 setInterval 延迟循环的代码

Question

我正在尝试制作一个图像推子，可以循环显示多个图像(此处为 3 个)。我让这个函数循环并淡入正确的图像，它可以工作，淡出一个图像，同时淡入下一个图像，这样就没有空白区域。除了当函数到达数组末尾时，它会淡出数组中的最后一个图像，然后循环回来并再次淡入第一个图像，从而创建第二个空白空间。

Javscript

<script type="text/javascript">
        var img_arr = [
            '#img1',
            '#img2',
            '#img3'
        ]
        var i = 0;
        arr_length = img_arr.length;
        //fade function
        function fade_gal() {
            $(img_arr[i])
                .animate(
                    {opacity: '1.0' }, 500
                );
            $('.img').delay(3000).animate({opacity: 0.0}, 500);
            i = i + 1;
            if (i == arr_length) {
                i = 0;
            }
        }
        $(document).ready(function img_gallery() {
            //initial function
            fade_gal();
            //set function interval
            setInterval( function() {fade_gal()}, 3500);
        })
    </script>

html

<div id="scroller">
            <img src="../../images/1.jpg" alt="img1" width="300px" id="img1" class="img"/>
            <img src="../../images/2.jpg" alt="img1" width="300px" id="img2" class="img"/>
            <img src="../../images/3.jpg" alt="img1" width="300px" id="img3" class="img"/>
        </div>

Answer 1

你的代码让我感到困惑，并不是说它是错误的。我无法弄清楚时间。

这是我的版本:( jsFiddle )

var img_arr = [
    '#img1',
    '#img2',
    '#img3'
    ];



arr_length = img_arr.length;
var i = arr_length;
//fade function

$('.img').css('opacity', 0.0);

function fade_gal() {

    $(img_arr[(i-1)%arr_length]).animate({opacity: 0.0}, 500);
    $(img_arr[i%arr_length]).animate({opacity: 1.0}, 500);

    i++;
}

$(document).ready(function () {
    //initial function
    fade_gal()

    //set function interval
    setInterval(function() {
        fade_gal()
    }, 3500);
})​