继续为图像滚动效果？

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/动画速度“慢”和自动滚屏