jQuery - Auto Scroll gallery

I'm in a bit of trouble and need help. I basically have a carousel (scrolling) type gallery with three images. You only see one image at a time, and to see the next image, you have to click the link that relates to that image or click on the current image itself to see the next image. This would make it scroll one image along and the li containing the image gets a class of 'active'.

I've been asked to add Auto Scroll functionality and I'm a bit stuck?

They basically want it to auto scroll 1 image every 2/3 seconds if the user is not using the links to scroll the gallery.

Any help would be MASSIVELY appreciated :)

I am not allowed to use a plug-in or anything either, I have to alter the current code :S

To be honest I know this is probably a hopeless case, but if there is somebody out there that could solve this it would be really appreciated.

The scrolling/gallery functionality is towards the bottom.

$(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();
   开发者_StackOverflow社区     }
    },

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

---

You could try using a setInterval:

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

This would call an anonymus function including your "scroll-to-next-image" function every 2 seconds. Probably you need a clearInterval when the user starts using the "next" / "previous" buttons again.

More information on this topic can be found here: https://developer.mozilla.org/en/DOM/window.setInterval