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

我无法看到每次跑步时淡出所有图像的理由......

如果您的图像绝对没有z-index，则有一个顶部和一个底部。

所有你要做的就是将顶部图像淡出，当它完成后，将它发送到堆的底部。

你可以这样编码（EDITED）（这里是一个小提琴：http://jsfiddle.net/txLet/）：

//fade function
function fade_gal() {
    var container = $('#container');
    var imgs = $('img',container);
    var img = imgs.last();
    img.animate({opacity: '0'}, {duration: 500, complete: function(){
        container.prepend(img); //send image to bottom
        img.css({opacity: 1});
    }});
}
$(document).ready(function img_gallery() {
    //initial function
    fade_gal();
    //set function interval
    setInterval(fade_gal,2000);
})

Answer 2

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

这是我的版本：（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);
})

Answer 3

尝试更改此行：

$('.img').delay(3000).animate({opacity: 0.0}, 500);

到此：

$(img_arr[i]).delay(3000).animate({opacity: 0.0}, 500);

我有一种感觉，即淡出和淡出之间存在冲突。

代码循环使用setInterval延迟

3 个答案: