javascript - 继续图像的滚动效果？

Question

我想在继续滚动模式下滚动我的 10 张图像，就像这个 Flash 文件中演示的那样:Demo Flash

但我想在不使用 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>