繼續爲圖像滾動效果？

Question

我想繼續滾動模式，就像在此flash文件證明滾動我的10張圖像：Demo Flash

但我想做到這一點使用CSS和jQuery或JavaScript，而無需使用閃光燈。我想連續滾動圖像，當我將鼠標懸停在它上面時，滾動條將停止，當滾動條停止時，它將再次開始滾動。

我GOOGLE了很多，但沒有找到腳本或插件，將不斷滾動我的圖像，並將開始/停止鼠標出/結束。

感謝

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/動畫速度「慢」和自動滾屏