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

jQuery - 自动滚动库

1 个答案: