Question

With my code I can get a div to scroll through 4 images, but if you look at the code, i have to keep adding ‘.next’ to get it to scroll to another image. I don’t want to determine the amount of images to scroll through in jquery, i want jquery to keep looking through the div for as many images as i have, scroll through all of them, then scroll back to the top. just take a look at my code. I don’t want to use another plugin because i’ve almost accomplished what I want to do with just a few lines of code compared to multi KB plugins.

ps: I don’t know why the ‘-165px’ is necessary, but it makes it all align perfectly when scrolling from picture to picture.

Jquery:

Jquery:

$(document).ready(function(){
    $('.rotate_container').everyTime(10, function (){
        $('.rotate_container').animate({scrollTop: $('img').offset().top - 165}, 2000).delay(1000)
        .animate({scrollTop: $("img").next().offset().top - 165}, 2000).delay(1000)                   
        .animate({scrollTop: $("img").next().next().offset().top - 165}, 2000).delay(1000)
        .animate({scrollTop: $("img").next().next().next().offset().top - 165}, 2000).delay(1000)
    });
});

Any ideas?

Answer 1

I didn’t test it, but this seems like it will work

$(document).ready(function(){
    var container = $('.rotate_container');
    var images = container.find('img');
    container.everyTime(10, function (){
        images.each(function() {
            container.animate({scrollTop: $(this).offset().top - 165}, 2000).delay(1000);
        });
    });
});