Jquery结合div+css实现图片垂直纵向不间断滚动效果

发布时间：2011年3月8日 / 分类：JavaScript / 13,258 次浏览 / 评论

关于实现滚动效果现在提供一个新的类库，功能更多，浏览器兼容性更强，点此移步过去看看。

年前写过一篇使用jquery结合div+css实现图片水平横向不间断滚动效果的文章，发现文章浏览量很高，看来大家都比较需要这种东西。
这篇文章再提供一个例子，实现图片垂直纵向不间断滚动，除了使用jquery、div+css、兼容多种浏览器，还提供了鼠标事件：鼠标停留时停止滚动，移开继续滚动。

点击这里下载这个例子

直接查看代码：

<html>
<head>
<title>多张图片垂直不间断循环滚动</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
//定时器间隔
var interval=30;
var objInterval=null;

$(document).ready(
function(){
//用上部的内容填充下部
$("#bottom").html($("#top").html());

//给显示的区域绑定鼠标事件
$("#content").bind("mouseover",function(){StopScroll();});
$("#content").bind("mouseout",function(){StartScroll();});

//启动定时器
StartScroll();
}
);

//启动定时器，开始滚动
function StartScroll(){
objInterval=setInterval("verticalloop()",interval);
}

//清除定时器，停止滚动
function StopScroll(){
window.clearInterval(objInterval);
}

//控制滚动
function verticalloop(){
//判断是否上部内容全部移出显示区域
//如果是，从新开始;否则，继续向上移动
if($("#top").outerHeight()-$("#content").scrollTop()<=0){
var top=$("#content").scrollTop()-$("#top").outerHeight();
$("#content").scrollTop(top);
}else{
var top=$("#content").scrollTop()+1;
$("#content").scrollTop(top);
}

$("#foot").html("scrollTop:"+$("#content").scrollTop());
}
</script>
</head>
<body>
<div id="title" style="width:100%;height:40px;">看看滚动图片</div>
<!--//?
使用display:inline;white-space:nowrap，使不换行。
使用overflow:hidden隐藏超出的部分。
保持top、bottom的高度一致
//-->

<div id="content" style="width:718px;height:600px;overflow:hidden;">
<div id="top" style="width:718px;height:1008px;">
<img src="images/1.png" /><br/>
<img src="images/2.png" /><br/>
<img src="images/3.png" /><br/>
</ul>
</div>
<div id="bottom" style="width:1636px;height:1008px;"></div>
</div>
<div id="foot"></div>
</body>
</html>

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自波斯马，原文地址《Jquery结合div+css实现图片垂直纵向不间断滚动效果》

关键字: 不间断滚动图片滚动垂直滚动