Продолжить эффект прокрутки для изображений?

Question

Я хочу прокрутить свои 10 изображений в режиме продолжения прокрутки, как показано в этом флэш-файле: Демонстрационная вспышка

Но я хочу сделать это с помощью CSS и jQuery или JavaScript без использования flash. Я хочу непрерывно прокручивать изображения, и когда я наведу на него курсор мыши, скроллер остановится, а когда выйдет, снова начнет прокручиваться.

Я много гуглил, но не смог найти скрипт или плагин, который будет непрерывно прокручивать мои изображения и запускать / останавливать при наведении курсора мыши.

Спасибо

Answer 1

Это то, что я пробовал с четырьмя изображениями. Пожалуйста, внесите изменения в этот код по мере необходимости.

<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>

Answer 2

http://sorgalla.com/projects/jcarousel/ со скоростью анимации "медленно" и автопрокруткой