Question

我想在继续滚动模式下滚动我的10张图片，就像在此Flash文件中所示：Demo Flash

但我想使用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/动画速度“慢”和自动滚动

继续滚动图像效果？

2 个答案: