jQuery - 自动滚动画廊

Question

我遇到了一些麻烦，需要帮助。我基本上有一个带有三张图像的轮播（滚动）类型的画廊。您一次只能看到一张图像，要查看下一张图像，您必须单击与该图像相关的链接或单击当前图像本身才能查看下一张图像。这将使其滚动一个图像，并且包含该图像的 li 获得一类“活动”。

我被要求添加自动滚动功能，但我有点卡住了？

如果用户不使用链接滚动图库，他们基本上希望它每 2/3 秒自动滚动 1 张图像。

任何帮助将非常感激:)

我不允许使用插件或任何东西，我必须改变当前的代码:S

说实话，我知道这可能是一个绝望的情况，但如果有人在那里这可以解决这个问题，我们将不胜感激。

滚动/图库功能位于底部。

$(document).ready(function() {
    Cufon.replace('.section-1 h2, .section-2 h3, .follow h3, .follow h4, .overlay h3, .overlay h4');
    $.friends.people.init();

    var prm = Sys.WebForms.PageRequestManager.getInstance();
       prm.add_endRequest($.friends.people.overlay.request);
});

$.friends.people = {
    init: function() {
        this.slide_anchors();
        this.gallery.init();
        $.friends.tooltips.init();
        this.overlay.init();
        this.label_value.init();
    },
    slide_anchors: function() {
        $('a.down, a.up').click(function(event) {
            event.preventDefault();
            var speed = 400;
            var target = $(this).attr('href');
            var dest = $(target).offset().top;

            $('html:not(:animated), body:not(:animated)').animate(
                { scrollTop: dest },
                speed,
                function() {
                    window.location.hash = target;
                }
            );
            return false;
        });
    },

    overlay: {
        email_btn: null,
        sms_btn: null,

        init: function() {
            this.close();
            $('a.sms').click(function() {
                __doPostBack($.friends.people.overlay.sms_btn, '');
                $('.overlay-wrap').fadeIn(250, function(){$.friends.people.label_value.init()});
                return false;
            });
            $('a.email').click(function() {
                __doPostBack($.friends.people.overlay.email_btn, '');
                $('.overlay-wrap').fadeIn(250, function(){$.friends.people.label_value.init()});
                return false;
            });
            $('.section-2 a.sms, .section-2 a.email').click(function() {
                $('a.up').click();
                return false;
            });
        },
        close: function() {
            $('a.overlay-close').click(function() {
                $('.overlay-wrap').fadeOut(250);
                return false;
            });
        },
        request: function() {
            $.friends.people.label_value.init();
            $.friends.people.overlay.close();
            Cufon.replace('.overlay h3, .overlay h4');
            $.friends.external_links();
        }
    },

    label_value: {
        init: function() {
            $('.labelValue').each(function() {
                var text = $(this).text().replace(/^\s+|\s+$/g, '');
                var $textbox = $('#'+$(this).attr('for'));

                if($textbox.val() == "") $textbox.val(text);
                $textbox.focus(function() {
                    if($(this).val() == text) $(this).val("");
                });
                $textbox.blur(function() {
                    if($textbox.val() == "") $textbox.val(text);
                });
            });
        }
    },

    gallery: {
        i: null,
        width: null,
        moving: false,
        speed: 500,

        init: function() {
            this.i = $('.section-2 .col-2 .images img').length;
            if (this.i > 1) {
                this.resize_div();
                this.add_nav();
            }
        },
        resize_div: function() {
            this.width = $('.section-2 .col-2 .images img:first').width();
            $('.section-2 .col-2 .images').width((this.i * this.width) + 'px');
        },
        add_nav: function() { /* rewrite this with .each() */
            var html = '<ul class="image-nav">';
            for (x = 0; x < this.i; x++) {
                html = html + '<li><a href=""></a></li>';
            }
            html = html + '</ul>';

            $('.section-2 .col-2').append(html).find('li:first').addClass('active');

            $('.section-2 .col-2 ul.image-nav li a').click(function() {
                if (!$.friends.people.gallery.moving) {
                    $.friends.people.gallery.moving = true;
                    $.friends.people.gallery.scroll($('.section-2 .col-2 ul.image-nav li a').index(this));
                }
                return false;
            });

            $('.section-2 .col-2 .images img').click(function() {
                if (!$.friends.people.gallery.moving) {
                    $.friends.people.gallery.moving = true;

                    var current = $('.section-2 .col-2 .images img').index(this);
                    if (current >= ($('.section-2 .col-2 .images img').length - 1)) {
                        var target = 0; console.log('asd');
                    } else {
                        var target = current + 1;
                    }

                    $.friends.people.gallery.scroll(target);
                }
                return false;
            });
        },
        scroll: function(img) {
            $('.section-2 .col-2 ul.image-nav li').removeClass('active');
            $('.section-2 .col-2 ul.image-nav li:eq(' + img + ')').addClass('active');

            $('.section-2 .col-2 .images').animate(
                { marginLeft: -($.friends.people.gallery.width * img) },
                $.friends.people.gallery.speed,
                function() {
                    $.friends.people.gallery.moving = false;
                }
            );
        }
    }
}

Answer 1

您可以尝试使用 setInterval：

window.setInterval(function() {
  // calling your scrolling-to-next-image function
}, 2000);

这将每 2 秒调用一个匿名函数，包括您的“滚动到下一个图像”函数。
当用户再次开始使用“下一个”/“上一个”按钮时，您可能需要一个 clearInterval 。

有关此主题的更多信息，请访问：https://developer.mozilla.org/en /DOM/window.setInterval