Question

这是一个简单的图片库脚本，用于淡入和淡出具有背景图像的div。它很慢而且工作不正常。

看起来所有图像都会在没有任何动画的情况下一起出现和消失

此图库应将每张图片淡入下一张图片

function gallery() {
            timerp = window.setInterval(function() {
                $('.cornerimg').fadeOut(2000);

                if ($('.cornerimg:visible') == $('.cornerimg').last()) {
                    $('.cornerimg').first().fadeIn(2000);
                } else {
                    $('.cornerimg').next().fadeIn(2000);
                };
            }, 6000);
        }
}

有什么想法吗？

Answer 1

next()只找到选择器的下一个兄弟。它不会跟踪你的位置。我会做一个setInterval并传递当前索引。例如：

function gallery() {
        ind = 0;
        l = $('.cornerimg').length;
        $('.cornerimg').fadeOut(500);        

        window.setInterval( function() {
            if ( ind > 0 ) $('.cornerimg').eq(ind-1).fadeOut(2000);
            if (ind == l) {
                ind = 0;
            }
            $('.cornerimg').eq(ind).fadeIn(500);
            ind++;
        }, 2000 );
}

$(function() { gallery() });

为了避免元素移位，将函数添加为fadeOut的回调，而不是异步发生。

注意：全局变量一般不是最好的方法，只是为了给你一个想法。更好的形式是拥有一个用setTimeout调用自身的函数，并且每次都传递递增的ind参数。

UNTESTED。

JQuery图库非功能性淡入淡出效果

1 个答案: