jQuery 图片库非功能性淡入淡出效果

发布于 2024-11-18 01:04:41 字数 550 浏览 1 评论 0原文

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

看起来所有图像都一起出现和消失，没有任何动画

这个画廊应该将每个图像淡入下一个图像

函数库() {
            timerp = window.setInterval(function() {
                $('.cornerimg').fadeOut(2000);

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

您知道它出了什么问题吗？

原文

Here is a simple image gallery script for fading in and out divs with background images. It is slow and not working properly.

It would appear all images are appearing and disappearing together without any animation

This gallery should fade each image out into the next one

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

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

Any ideas what has gone wrong with it?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

带刺的爱情 2024-11-25 01:04:41

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 参数。

未经测试。

next() just finds the next sibling for the selector. It doesn't keep track of where you are. I would do a setInterval and pass the current index along with it. For example:

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

To avoid shifting of elements, add the function as a callback to the fadeOut instead of having them happen asynchronously.

NOTE: Global variables are not the best way to go in general, but just to give you an idea. The better form is to have a function that calls itself with setTimeout and passes the incremented ind argument each time.

UNTESTED.

回复收藏 0 原文

~没有更多了~