开发者

jQuery image scroller - continuous loop

I have coded a basic image scroller that randomly positions images (in a ) and then lets you use two buttons to animate then left and right.

So far, everything works nicely, I have each image moving at a different speed, and when you stop hoving over the button, everything stops.

But one last feature I would like if for the images to "loop" back, so if they leave the left edge, they re-appear to the right and vice-versa.

Is this possible?

Here is my code:

<script type="text/javascript">
    $(document).ready(function() {

        $('.Product_List li').each(function() {
            $(this).css('left', Math.floor(Math.random() * 1280));
            $(this).css('top', Math.floor(Math.random() * 200));

            var $speed = Math.floor(Math.random()*1000000);

            $(this).animate({left: "+=1280px"}, $speed, 'linear');
        });

        $('.moveLeft').hover(
            function() {
                $('.Product_List li').stop();
                $('.Product_List li').each(function() {
                    var $speed = Math.floor(Math.random()*1000000);
                    $(this).animate({left: "-=1280px"}, $speed, 'linear');
                });
            },
            function() {
                $('.Product_List li').stop();
            }
        );
        $('.moveRight').hover(
            function() {
                $('.Product_List li').stop();
                $('.Product_List li').each(function() {
                    var $speed = Math.floor(Math.random()*100000);
                    $(this).animate({left: "+=1280px"}, $speed, 'linear');
                });
            },
            function() {
                $('.Product_List li').stop(开发者_开发技巧);
            }
        );
    });
</script>

Hope someone can shed some light on my request!

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜