Scroll images over and over again without having to click the next or previous button

<script>
     $(document).ready(function () {
            var speed = 600;

            $('#navPrev').click(function () {
                $('#carouselul').animate({ marginLeft: '-280px' }, speed);
            });

            $('#navNext').click(function () {
                $('#carousel ul').animate({ marginLeft: '1开发者_如何学Cpx' }, speed);
            });
        });

    $('#carousel ul').toggle(
        function() {
            $('#drop').hide('drop', { direction: 'right' }, 1000);
        },
        function() {
            $('#drop').show('drop', { direction: 'down' }, 500);
        }
    );
</script>

<style type="text/css">
    #container {height:100px; width:500px; font-family:Tahoma;}
    #carousel { height:100px; width:500px; border:1px solid #000;
    overflow:hidden;}
    #carousel ul { list-style-type:none;margin-top:4px; width:2000px; margin-
    left:0; left:0; padding-left:1px;}
    #carousel li { display:inline;}
    #carousel ul li img{ width:90px; height:90px; border:1px solid #ccc;
        float:left; }
    #navPrev {float:left;}
    #navNext {float:right;}
</style>

Hopefully, it's complete now.

This might help:

var animate = function () {
    var speed = 600;

    animate.toggle = !animate.toggle;

    $('#carousel ul').animate({
        marginLeft: (animate.toggle ? '-280px' : '1px')
    }, speed, delayAnimate);
};


var delayAnimate = function () {
    var delay = 500;
    setTimeout(animate, delay);
};

And you'd better always cache your DOM query results, because queries are very costly. Like that:

var carusel = $('#carousel ul');

var animate = function () {
    // ...
    carousel.animate()
}