Continue scrolling effect for images?

Question

I want to scroll my 10 images in continue scrolling mode just like demonstrated in this flash file: Demo Flash

But I want to do this using CSS, and jQuery or JavaScript without using flash. I want to scroll images continuously and when I mouse over on it the scroller will stop and when out it will again start scrolling.

I Googled a lot but didn't able to find the script or plugin which will scroll my images continuously and will start/stop on mouse out/over .

Thanks

Answer 1

http://sorgalla.com/projects/jcarousel/ with animation speed "slow" and autoscroll

Answer 2

This is what I have tried with four images. Please make changes in this code as you need it.

<style type="text/css">
#container{
    width: 640px;
    height: 200px;
    border: 1px solid #0099FF;
    white-space: nowrap;
    overflow: hidden;
    top:150px;
    left:100px;
    position:absolute;
}
.slide{
    position:absolute;
    left:0px;   
}
</style>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
var timer;
    $(function(){
        var images = $('.slide');
        var preImageWidth = 0;
        for(var i=0; i<images.length; i++){
            if(i==0){
                var width = 0 - parseInt($(images[i]).css('width').replace("px",""));
                $(images[i]).css('left',width+'px');
            } else if(i==1){
                preImageWidth = parseInt($(images[i]).css('width').replace("px",""));
                $(images[i]).css('left','0px');
            } else {
                $(images[i]).css('left',preImageWidth+'px');
                preImageWidth = preImageWidth + parseInt($(images[i]).css('width').replace("px",""));                
            }
            $(images[i]).mouseover(function(){
                 clearInterval(timer);
            });
            $(images[i]).mouseout(function(){
                 timer = setInterval("startScroll()", 10);
            });
        }
        timer = setInterval("startScroll()", 10);
    });

    function startScroll(){
        var images = $('.slide');       
        for(var i=0; i<images.length; i++){
            var left = parseInt($(images[i]).css('left').replace("px",""))+1;
            var width = parseInt($(images[i]).css('width').replace("px",""));           
            if(left>=640){
                 left = 0 - width;
            }
            $(images[i]).css('left',left+'px');         
        }
    }
</script>

HTML:

<div id="container">
<img src="images/zooey.jpg" height="200" class="slide"/>
<img src="images/britny.jpg" height="200" class="slide"/>
<img src="images/connelly.jpg" height="200" class="slide"/>
<img src="images/diane.jpg" height="200" class="slide"/>
</div>